docs(solid-router): add with-trpc example #5829
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| node_modules | ||
| package-lock.json | ||
| yarn.lock | ||
|
|
||
| .DS_Store | ||
| .cache | ||
| .env | ||
| .vercel | ||
| .output | ||
| /build/ | ||
| /api/ | ||
| /server/build | ||
| /public/build# Sentry Config File | ||
| .env.sentry-build-plugin | ||
| /test-results/ | ||
| /playwright-report/ | ||
| /blob-report/ | ||
| /playwright/.cache/ | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "files.watcherExclude": { | ||
| "**/routeTree.gen.ts": true | ||
| }, | ||
| "search.exclude": { | ||
| "**/routeTree.gen.ts": true | ||
| }, | ||
| "files.readonlyInclude": { | ||
| "**/routeTree.gen.ts": true | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| # Example | ||
|
|
||
| To run this example: | ||
|
|
||
| - `npm install` or `yarn` | ||
| - `npm start` or `yarn start` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Vite App</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,32 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "name": "tanstack-router-solid-example-with-trpc", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "private": true, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "type": "module", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "scripts": { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "dev": "pnpm tsx ./src/server/server.ts --watch", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "build": "pnpm run build:server && pnpm run build:client", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "build:client": "vite build && tsc --noEmit", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "build:server": "vite build --mode server", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "start": "NODE_ENV=production node dist/server/server.js" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "dependencies": { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@tailwindcss/postcss": "^4.1.15", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@tanstack/solid-router": "^1.135.2", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@tanstack/router-plugin": "^1.135.2", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@trpc/client": "^11.4.3", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@trpc/server": "^11.4.3", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "express": "^4.21.2", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "postcss": "^8.5.1", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "solid-js": "^1.9.10", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "redaxios": "^0.5.1", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "tailwindcss": "^4.1.15", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "zod": "^3.24.2" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+12
to
+24
Contributor
There was a problem hiding this comment. Switch internal TanStack deps to Per the monorepo guidelines, local packages must resolve via - "@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:*",(pnpm.io) 📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "devDependencies": { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "@types/express": "^4.17.23", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "vite-plugin-solid": "^2.11.10", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "tsx": "^4.20.3", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "vite": "^7.1.7" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export default { | ||
| plugins: { | ||
| '@tailwindcss/postcss': {}, | ||
| }, | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { render } from 'solid-js/web' | ||
| import { RouterProvider, createRouter } from '@tanstack/solid-router' | ||
| import { trpc } from './trpc' | ||
|
|
||
| import { Spinner } from './routes/-components/spinner' | ||
| import './styles.css' | ||
|
|
||
| // Import the generated route tree | ||
| import { routeTree } from './routeTree.gen' | ||
|
|
||
| // Create a router instance | ||
| const router = createRouter({ | ||
| routeTree, | ||
| scrollRestoration: true, | ||
| defaultPreload: 'intent', | ||
| defaultPendingComponent: () => ( | ||
| <div class={`p-2 text-2xl`}> | ||
| <Spinner /> | ||
| </div> | ||
| ), | ||
| context: { | ||
| trpc, | ||
| }, | ||
| }) | ||
|
|
||
| // Register the router instance for type safety | ||
| declare module '@tanstack/solid-router' { | ||
| interface Register { | ||
| router: typeof router | ||
| } | ||
| } | ||
|
|
||
| const rootElement = document.getElementById('root')! | ||
|
|
||
| if (!rootElement.innerHTML) { | ||
| render(() => <RouterProvider router={router} />, rootElement) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| // @ts-nocheck | ||
|
|
||
| // noinspection JSUnusedGlobalSymbols | ||
|
|
||
| // This file was automatically generated by TanStack Router. | ||
| // You should NOT make any changes in this file as it will be overwritten. | ||
| // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. | ||
|
|
||
| import { Route as rootRouteImport } from './routes/__root' | ||
| import { Route as DashboardRouteImport } from './routes/dashboard' | ||
| import { Route as IndexRouteImport } from './routes/index' | ||
| import { Route as DashboardIndexRouteImport } from './routes/dashboard.index' | ||
| import { Route as DashboardPostsRouteImport } from './routes/dashboard.posts' | ||
| import { Route as DashboardPostsIndexRouteImport } from './routes/dashboard.posts.index' | ||
| import { Route as DashboardPostsPostIdRouteImport } from './routes/dashboard.posts.$postId' | ||
|
|
||
| const DashboardRoute = DashboardRouteImport.update({ | ||
| id: '/dashboard', | ||
| path: '/dashboard', | ||
| getParentRoute: () => rootRouteImport, | ||
| } as any) | ||
| const IndexRoute = IndexRouteImport.update({ | ||
| id: '/', | ||
| path: '/', | ||
| getParentRoute: () => rootRouteImport, | ||
| } as any) | ||
| const DashboardIndexRoute = DashboardIndexRouteImport.update({ | ||
| id: '/', | ||
| path: '/', | ||
| getParentRoute: () => DashboardRoute, | ||
| } as any) | ||
| const DashboardPostsRoute = DashboardPostsRouteImport.update({ | ||
| id: '/posts', | ||
| path: '/posts', | ||
| getParentRoute: () => DashboardRoute, | ||
| } as any) | ||
| const DashboardPostsIndexRoute = DashboardPostsIndexRouteImport.update({ | ||
| id: '/', | ||
| path: '/', | ||
| getParentRoute: () => DashboardPostsRoute, | ||
| } as any) | ||
| const DashboardPostsPostIdRoute = DashboardPostsPostIdRouteImport.update({ | ||
| id: '/$postId', | ||
| path: '/$postId', | ||
| getParentRoute: () => DashboardPostsRoute, | ||
| } as any) | ||
|
|
||
| export interface FileRoutesByFullPath { | ||
| '/': typeof IndexRoute | ||
| '/dashboard': typeof DashboardRouteWithChildren | ||
| '/dashboard/posts': typeof DashboardPostsRouteWithChildren | ||
| '/dashboard/': typeof DashboardIndexRoute | ||
| '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute | ||
| '/dashboard/posts/': typeof DashboardPostsIndexRoute | ||
| } | ||
| export interface FileRoutesByTo { | ||
| '/': typeof IndexRoute | ||
| '/dashboard': typeof DashboardIndexRoute | ||
| '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute | ||
| '/dashboard/posts': typeof DashboardPostsIndexRoute | ||
| } | ||
| export interface FileRoutesById { | ||
| __root__: typeof rootRouteImport | ||
| '/': typeof IndexRoute | ||
| '/dashboard': typeof DashboardRouteWithChildren | ||
| '/dashboard/posts': typeof DashboardPostsRouteWithChildren | ||
| '/dashboard/': typeof DashboardIndexRoute | ||
| '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute | ||
| '/dashboard/posts/': typeof DashboardPostsIndexRoute | ||
| } | ||
| export interface FileRouteTypes { | ||
| fileRoutesByFullPath: FileRoutesByFullPath | ||
| fullPaths: | ||
| | '/' | ||
| | '/dashboard' | ||
| | '/dashboard/posts' | ||
| | '/dashboard/' | ||
| | '/dashboard/posts/$postId' | ||
| | '/dashboard/posts/' | ||
| fileRoutesByTo: FileRoutesByTo | ||
| to: '/' | '/dashboard' | '/dashboard/posts/$postId' | '/dashboard/posts' | ||
| id: | ||
| | '__root__' | ||
| | '/' | ||
| | '/dashboard' | ||
| | '/dashboard/posts' | ||
| | '/dashboard/' | ||
| | '/dashboard/posts/$postId' | ||
| | '/dashboard/posts/' | ||
| fileRoutesById: FileRoutesById | ||
| } | ||
| export interface RootRouteChildren { | ||
| IndexRoute: typeof IndexRoute | ||
| DashboardRoute: typeof DashboardRouteWithChildren | ||
| } | ||
|
|
||
| declare module '@tanstack/solid-router' { | ||
| interface FileRoutesByPath { | ||
| '/dashboard': { | ||
| id: '/dashboard' | ||
| path: '/dashboard' | ||
| fullPath: '/dashboard' | ||
| preLoaderRoute: typeof DashboardRouteImport | ||
| parentRoute: typeof rootRouteImport | ||
| } | ||
| '/': { | ||
| id: '/' | ||
| path: '/' | ||
| fullPath: '/' | ||
| preLoaderRoute: typeof IndexRouteImport | ||
| parentRoute: typeof rootRouteImport | ||
| } | ||
| '/dashboard/': { | ||
| id: '/dashboard/' | ||
| path: '/' | ||
| fullPath: '/dashboard/' | ||
| preLoaderRoute: typeof DashboardIndexRouteImport | ||
| parentRoute: typeof DashboardRoute | ||
| } | ||
| '/dashboard/posts': { | ||
| id: '/dashboard/posts' | ||
| path: '/posts' | ||
| fullPath: '/dashboard/posts' | ||
| preLoaderRoute: typeof DashboardPostsRouteImport | ||
| parentRoute: typeof DashboardRoute | ||
| } | ||
| '/dashboard/posts/': { | ||
| id: '/dashboard/posts/' | ||
| path: '/' | ||
| fullPath: '/dashboard/posts/' | ||
| preLoaderRoute: typeof DashboardPostsIndexRouteImport | ||
| parentRoute: typeof DashboardPostsRoute | ||
| } | ||
| '/dashboard/posts/$postId': { | ||
| id: '/dashboard/posts/$postId' | ||
| path: '/$postId' | ||
| fullPath: '/dashboard/posts/$postId' | ||
| preLoaderRoute: typeof DashboardPostsPostIdRouteImport | ||
| parentRoute: typeof DashboardPostsRoute | ||
| } | ||
| } | ||
| } | ||
|
|
||
| interface DashboardPostsRouteChildren { | ||
| DashboardPostsPostIdRoute: typeof DashboardPostsPostIdRoute | ||
| DashboardPostsIndexRoute: typeof DashboardPostsIndexRoute | ||
| } | ||
|
|
||
| const DashboardPostsRouteChildren: DashboardPostsRouteChildren = { | ||
| DashboardPostsPostIdRoute: DashboardPostsPostIdRoute, | ||
| DashboardPostsIndexRoute: DashboardPostsIndexRoute, | ||
| } | ||
|
|
||
| const DashboardPostsRouteWithChildren = DashboardPostsRoute._addFileChildren( | ||
| DashboardPostsRouteChildren, | ||
| ) | ||
|
|
||
| interface DashboardRouteChildren { | ||
| DashboardPostsRoute: typeof DashboardPostsRouteWithChildren | ||
| DashboardIndexRoute: typeof DashboardIndexRoute | ||
| } | ||
|
|
||
| const DashboardRouteChildren: DashboardRouteChildren = { | ||
| DashboardPostsRoute: DashboardPostsRouteWithChildren, | ||
| DashboardIndexRoute: DashboardIndexRoute, | ||
| } | ||
|
|
||
| const DashboardRouteWithChildren = DashboardRoute._addFileChildren( | ||
| DashboardRouteChildren, | ||
| ) | ||
|
|
||
| const rootRouteChildren: RootRouteChildren = { | ||
| IndexRoute: IndexRoute, | ||
| DashboardRoute: DashboardRouteWithChildren, | ||
| } | ||
| export const routeTree = rootRouteImport | ||
| ._addFileChildren(rootRouteChildren) | ||
| ._addFileTypes<FileRouteTypes>() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export function Spinner(props: { show?: boolean; wait?: `delay-${number}` }) { | ||
| return ( | ||
| <div | ||
| class={ | ||
| props.show !== undefined | ||
| ? `inline-block animate-spin px-3 transition ${ | ||
| props.show | ||
| ? `opacity-100 duration-500 ${props.wait ?? 'delay-300'}` | ||
| : 'duration-500 opacity-0 delay-0' | ||
| }` | ||
| : 'inline-block animate-spin px-3' | ||
| } | ||
| > | ||
| ⍥ | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix malformed
.gitignorepattern: comment on same line as pattern.Line 13 has a comment on the same line as the ignore pattern, which is invalid
.gitignoresyntax. The pattern will be interpreted literally as/public/build# Sentry Config Filerather than ignoring/public/build. Move the comment to the line above or separate it.Apply this diff to fix the syntax error:
📝 Committable suggestion
🤖 Prompt for AI Agents