Skip to content

Commit 9727eb4

Browse files
birkskyumbirkskyum
authored
docs(solid-router): add with-trpc example (#5829)
1 parent 34f475e commit 9727eb4

24 files changed

+1000
-0
lines changed

‎docs/router/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,10 @@
645645
{
646646
"label": "Framer Motion",
647647
"to": "framework/solid/examples/with-framer-motion"
648+
},
649+
{
650+
"label": "With tRPC",
651+
"to": "framework/solid/examples/with-trpc"
648652
}
649653
]
650654
}

‎examples/solid/with-trpc/.gitignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
5+
.DS_Store
6+
.cache
7+
.env
8+
.vercel
9+
.output
10+
/build/
11+
/api/
12+
/server/build
13+
/public/build# Sentry Config File
14+
.env.sentry-build-plugin
15+
/test-results/
16+
/playwright-report/
17+
/blob-report/
18+
/playwright/.cache/

‎examples/solid/with-trpc/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/with-trpc/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm start` or `yarn start`

‎examples/solid/with-trpc/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/solid/with-trpc/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "tanstack-router-solid-example-with-trpc",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "pnpm tsx ./src/server/server.ts --watch",
7+
"build": "pnpm run build:server && pnpm run build:client",
8+
"build:client": "vite build && tsc --noEmit",
9+
"build:server": "vite build --mode server",
10+
"start": "NODE_ENV=production node dist/server/server.js"
11+
},
12+
"dependencies": {
13+
"@tailwindcss/postcss": "^4.1.15",
14+
"@tanstack/solid-router": "^1.135.2",
15+
"@tanstack/solid-router-devtools": "^1.135.2",
16+
"@tanstack/router-plugin": "^1.135.2",
17+
"@trpc/client": "^11.4.3",
18+
"@trpc/server": "^11.4.3",
19+
"express": "^4.21.2",
20+
"postcss": "^8.5.1",
21+
"solid-js": "^1.9.10",
22+
"redaxios": "^0.5.1",
23+
"tailwindcss": "^4.1.15",
24+
"zod": "^3.24.2"
25+
},
26+
"devDependencies": {
27+
"@types/express": "^4.17.23",
28+
"vite-plugin-solid": "^2.11.10",
29+
"tsx": "^4.20.3",
30+
"vite": "^7.1.7"
31+
}
32+
}

‎examples/solid/with-trpc/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

‎examples/solid/with-trpc/src/main.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { render } from 'solid-js/web'
2+
import { RouterProvider, createRouter } from '@tanstack/solid-router'
3+
import { trpc } from './trpc'
4+
5+
import { Spinner } from './routes/-components/spinner'
6+
import './styles.css'
7+
8+
// Import the generated route tree
9+
import { routeTree } from './routeTree.gen'
10+
11+
// Create a router instance
12+
const router = createRouter({
13+
routeTree,
14+
scrollRestoration: true,
15+
defaultPreload: 'intent',
16+
defaultPendingComponent: () => (
17+
<div class={`p-2 text-2xl`}>
18+
<Spinner />
19+
</div>
20+
),
21+
context: {
22+
trpc,
23+
},
24+
})
25+
26+
// Register the router instance for type safety
27+
declare module '@tanstack/solid-router' {
28+
interface Register {
29+
router: typeof router
30+
}
31+
}
32+
33+
const rootElement = document.getElementById('root')!
34+
35+
if (!rootElement.innerHTML) {
36+
render(() => <RouterProvider router={router} />, rootElement)
37+
}

‎examples/solid/with-trpc/src/routeTree.gen.ts‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as DashboardRouteImport } from './routes/dashboard'
13+
import { Route as IndexRouteImport } from './routes/index'
14+
import { Route as DashboardIndexRouteImport } from './routes/dashboard.index'
15+
import { Route as DashboardPostsRouteImport } from './routes/dashboard.posts'
16+
import { Route as DashboardPostsIndexRouteImport } from './routes/dashboard.posts.index'
17+
import { Route as DashboardPostsPostIdRouteImport } from './routes/dashboard.posts.$postId'
18+
19+
const DashboardRoute = DashboardRouteImport.update({
20+
id: '/dashboard',
21+
path: '/dashboard',
22+
getParentRoute: () => rootRouteImport,
23+
} as any)
24+
const IndexRoute = IndexRouteImport.update({
25+
id: '/',
26+
path: '/',
27+
getParentRoute: () => rootRouteImport,
28+
} as any)
29+
const DashboardIndexRoute = DashboardIndexRouteImport.update({
30+
id: '/',
31+
path: '/',
32+
getParentRoute: () => DashboardRoute,
33+
} as any)
34+
const DashboardPostsRoute = DashboardPostsRouteImport.update({
35+
id: '/posts',
36+
path: '/posts',
37+
getParentRoute: () => DashboardRoute,
38+
} as any)
39+
const DashboardPostsIndexRoute = DashboardPostsIndexRouteImport.update({
40+
id: '/',
41+
path: '/',
42+
getParentRoute: () => DashboardPostsRoute,
43+
} as any)
44+
const DashboardPostsPostIdRoute = DashboardPostsPostIdRouteImport.update({
45+
id: '/$postId',
46+
path: '/$postId',
47+
getParentRoute: () => DashboardPostsRoute,
48+
} as any)
49+
50+
export interface FileRoutesByFullPath {
51+
'/': typeof IndexRoute
52+
'/dashboard': typeof DashboardRouteWithChildren
53+
'/dashboard/posts': typeof DashboardPostsRouteWithChildren
54+
'/dashboard/': typeof DashboardIndexRoute
55+
'/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
56+
'/dashboard/posts/': typeof DashboardPostsIndexRoute
57+
}
58+
export interface FileRoutesByTo {
59+
'/': typeof IndexRoute
60+
'/dashboard': typeof DashboardIndexRoute
61+
'/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
62+
'/dashboard/posts': typeof DashboardPostsIndexRoute
63+
}
64+
export interface FileRoutesById {
65+
__root__: typeof rootRouteImport
66+
'/': typeof IndexRoute
67+
'/dashboard': typeof DashboardRouteWithChildren
68+
'/dashboard/posts': typeof DashboardPostsRouteWithChildren
69+
'/dashboard/': typeof DashboardIndexRoute
70+
'/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
71+
'/dashboard/posts/': typeof DashboardPostsIndexRoute
72+
}
73+
export interface FileRouteTypes {
74+
fileRoutesByFullPath: FileRoutesByFullPath
75+
fullPaths:
76+
| '/'
77+
| '/dashboard'
78+
| '/dashboard/posts'
79+
| '/dashboard/'
80+
| '/dashboard/posts/$postId'
81+
| '/dashboard/posts/'
82+
fileRoutesByTo: FileRoutesByTo
83+
to: '/' | '/dashboard' | '/dashboard/posts/$postId' | '/dashboard/posts'
84+
id:
85+
| '__root__'
86+
| '/'
87+
| '/dashboard'
88+
| '/dashboard/posts'
89+
| '/dashboard/'
90+
| '/dashboard/posts/$postId'
91+
| '/dashboard/posts/'
92+
fileRoutesById: FileRoutesById
93+
}
94+
export interface RootRouteChildren {
95+
IndexRoute: typeof IndexRoute
96+
DashboardRoute: typeof DashboardRouteWithChildren
97+
}
98+
99+
declare module '@tanstack/solid-router' {
100+
interface FileRoutesByPath {
101+
'/dashboard': {
102+
id: '/dashboard'
103+
path: '/dashboard'
104+
fullPath: '/dashboard'
105+
preLoaderRoute: typeof DashboardRouteImport
106+
parentRoute: typeof rootRouteImport
107+
}
108+
'/': {
109+
id: '/'
110+
path: '/'
111+
fullPath: '/'
112+
preLoaderRoute: typeof IndexRouteImport
113+
parentRoute: typeof rootRouteImport
114+
}
115+
'/dashboard/': {
116+
id: '/dashboard/'
117+
path: '/'
118+
fullPath: '/dashboard/'
119+
preLoaderRoute: typeof DashboardIndexRouteImport
120+
parentRoute: typeof DashboardRoute
121+
}
122+
'/dashboard/posts': {
123+
id: '/dashboard/posts'
124+
path: '/posts'
125+
fullPath: '/dashboard/posts'
126+
preLoaderRoute: typeof DashboardPostsRouteImport
127+
parentRoute: typeof DashboardRoute
128+
}
129+
'/dashboard/posts/': {
130+
id: '/dashboard/posts/'
131+
path: '/'
132+
fullPath: '/dashboard/posts/'
133+
preLoaderRoute: typeof DashboardPostsIndexRouteImport
134+
parentRoute: typeof DashboardPostsRoute
135+
}
136+
'/dashboard/posts/$postId': {
137+
id: '/dashboard/posts/$postId'
138+
path: '/$postId'
139+
fullPath: '/dashboard/posts/$postId'
140+
preLoaderRoute: typeof DashboardPostsPostIdRouteImport
141+
parentRoute: typeof DashboardPostsRoute
142+
}
143+
}
144+
}
145+
146+
interface DashboardPostsRouteChildren {
147+
DashboardPostsPostIdRoute: typeof DashboardPostsPostIdRoute
148+
DashboardPostsIndexRoute: typeof DashboardPostsIndexRoute
149+
}
150+
151+
const DashboardPostsRouteChildren: DashboardPostsRouteChildren = {
152+
DashboardPostsPostIdRoute: DashboardPostsPostIdRoute,
153+
DashboardPostsIndexRoute: DashboardPostsIndexRoute,
154+
}
155+
156+
const DashboardPostsRouteWithChildren = DashboardPostsRoute._addFileChildren(
157+
DashboardPostsRouteChildren,
158+
)
159+
160+
interface DashboardRouteChildren {
161+
DashboardPostsRoute: typeof DashboardPostsRouteWithChildren
162+
DashboardIndexRoute: typeof DashboardIndexRoute
163+
}
164+
165+
const DashboardRouteChildren: DashboardRouteChildren = {
166+
DashboardPostsRoute: DashboardPostsRouteWithChildren,
167+
DashboardIndexRoute: DashboardIndexRoute,
168+
}
169+
170+
const DashboardRouteWithChildren = DashboardRoute._addFileChildren(
171+
DashboardRouteChildren,
172+
)
173+
174+
const rootRouteChildren: RootRouteChildren = {
175+
IndexRoute: IndexRoute,
176+
DashboardRoute: DashboardRouteWithChildren,
177+
}
178+
export const routeTree = rootRouteImport
179+
._addFileChildren(rootRouteChildren)
180+
._addFileTypes<FileRouteTypes>()

‎examples/solid/with-trpc/src/routes/-components/spinner.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function Spinner(props: { show?: boolean; wait?: `delay-${number}` }) {
2+
return (
3+
<div
4+
class={
5+
props.show !== undefined
6+
? `inline-block animate-spin px-3 transition ${
7+
props.show
8+
? `opacity-100 duration-500 ${props.wait ?? 'delay-300'}`
9+
: 'duration-500 opacity-0 delay-0'
10+
}`
11+
: 'inline-block animate-spin px-3'
12+
}
13+
>
14+
⍥
15+
</div>
16+
)
17+
}

0 commit comments

Comments
 (0)