Skip to content

Commit b32a9bc

Browse files
birkskyumbirkskyum
committed
docs(solid-router): large-file-based
1 parent 5a06540 commit b32a9bc

22 files changed

+683
-0
lines changed

‎examples/solid/large-file-based/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
(gen)

‎examples/solid/large-file-based/.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/large-file-based/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Example
2+
3+
This example generates a large amount file based routes to diagnose typescript performance issues
4+
5+
To run this example:
6+
7+
- `pnpm install`
8+
- `pnpm gen` to generate routes
9+
- `pnpm build` to update route tree
10+
- `pnpm test:types` to type check and run diagnostics

‎examples/solid/large-file-based/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="app"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/solid/large-file-based/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "tanstack-router-solid-example-large-file-based",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port 3000",
7+
"build": "vite build && tsc --noEmit",
8+
"serve": "vite preview",
9+
"start": "vite",
10+
"gen": "node ./src/createRoutes.mjs",
11+
"test:types": "tsc --extendedDiagnostics"
12+
},
13+
"dependencies": {
14+
"@tailwindcss/postcss": "^4.1.15",
15+
"@tanstack/solid-query": "^5.90.0",
16+
"@tanstack/solid-router": "^1.135.2",
17+
"@tanstack/solid-router-devtools": "^1.135.2",
18+
"@tanstack/router-plugin": "^1.135.2",
19+
"postcss": "^8.5.1",
20+
"solid-js": "^1.9.10",
21+
"redaxios": "^0.5.1",
22+
"tailwindcss": "^4.1.15",
23+
"zod": "^3.24.2"
24+
},
25+
"devDependencies": {
26+
"vite-plugin-solid": "^2.11.10",
27+
"typescript": "^5.7.2",
28+
"vite": "^7.1.7"
29+
}
30+
}

‎examples/solid/large-file-based/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/large-file-based/src/createRoutes.mjs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { readFile, writeFile, mkdir } from 'fs/promises'
2+
import { existsSync } from 'fs'
3+
4+
const length = 100
5+
6+
const main = async () => {
7+
const absolute = (await readFile('./src/routes/absolute.tsx')).toString()
8+
const relative = (await readFile('./src/routes/relative.tsx')).toString()
9+
const searchRoute = (
10+
await readFile('./src/routes/search/route.tsx')
11+
).toString()
12+
const search = (
13+
await readFile('./src/routes/search/searchPlaceholder.tsx')
14+
).toString()
15+
const paramsRoute = (
16+
await readFile('./src/routes/params/route.tsx')
17+
).toString()
18+
const params = await (
19+
await readFile('./src/routes/params/$paramsPlaceholder.tsx')
20+
).toString()
21+
22+
if (!existsSync('./src/routes/(gen)')) {
23+
await mkdir('./src/routes/(gen)')
24+
}
25+
26+
if (!existsSync('./src/routes/(gen)/search')) {
27+
await mkdir('./src/routes/(gen)/search')
28+
}
29+
30+
if (!existsSync('./src/routes/(gen)/params')) {
31+
await mkdir('./src/routes/(gen)/params')
32+
}
33+
34+
await writeFile('./src/routes/(gen)/search/route.tsx', searchRoute)
35+
await writeFile('./src/routes/(gen)/params/route.tsx', paramsRoute)
36+
37+
for (let y = 0; y < length; y = y + 1) {
38+
const replacedAbsolute = absolute.replaceAll('/absolute', `/absolute${y}`)
39+
const replacedRelative = relative.replaceAll('/relative', `/relative${y}`)
40+
const replacedSearch = search.replaceAll('searchPlaceholder', `search${y}`)
41+
const replacedParams = params.replaceAll('paramsPlaceholder', `param${y}`)
42+
await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute)
43+
await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative)
44+
await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch)
45+
await writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams)
46+
}
47+
}
48+
49+
main()

‎examples/solid/large-file-based/src/main.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { render } from 'solid-js/web'
2+
import { RouterProvider, createRouter } from '@tanstack/solid-router'
3+
import { QueryClient } from '@tanstack/solid-query'
4+
import { routeTree } from './routeTree.gen'
5+
import './styles.css'
6+
7+
export const queryClient = new QueryClient()
8+
9+
// Set up a Router instance
10+
const router = createRouter({
11+
routeTree,
12+
defaultPreload: 'intent',
13+
context: {
14+
queryClient,
15+
},
16+
scrollRestoration: true,
17+
})
18+
19+
// Register things for typesafety
20+
declare module '@tanstack/solid-router' {
21+
interface Register {
22+
router: typeof router
23+
}
24+
}
25+
26+
const rootElement = document.getElementById('app')!
27+
28+
if (!rootElement.innerHTML) {
29+
render(() => <RouterProvider router={router} />, rootElement)
30+
}

‎examples/solid/large-file-based/src/routeTree.gen.ts‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
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 RelativeRouteImport } from './routes/relative'
13+
import { Route as LinkPropsRouteImport } from './routes/linkProps'
14+
import { Route as AbsoluteRouteImport } from './routes/absolute'
15+
import { Route as SearchRouteRouteImport } from './routes/search/route'
16+
import { Route as ParamsRouteRouteImport } from './routes/params/route'
17+
import { Route as IndexRouteImport } from './routes/index'
18+
import { Route as SearchSearchPlaceholderRouteImport } from './routes/search/searchPlaceholder'
19+
import { Route as ParamsParamsPlaceholderRouteImport } from './routes/params/$paramsPlaceholder'
20+
21+
const RelativeRoute = RelativeRouteImport.update({
22+
id: '/relative',
23+
path: '/relative',
24+
getParentRoute: () => rootRouteImport,
25+
} as any)
26+
const LinkPropsRoute = LinkPropsRouteImport.update({
27+
id: '/linkProps',
28+
path: '/linkProps',
29+
getParentRoute: () => rootRouteImport,
30+
} as any)
31+
const AbsoluteRoute = AbsoluteRouteImport.update({
32+
id: '/absolute',
33+
path: '/absolute',
34+
getParentRoute: () => rootRouteImport,
35+
} as any)
36+
const SearchRouteRoute = SearchRouteRouteImport.update({
37+
id: '/search',
38+
path: '/search',
39+
getParentRoute: () => rootRouteImport,
40+
} as any)
41+
const ParamsRouteRoute = ParamsRouteRouteImport.update({
42+
id: '/params',
43+
path: '/params',
44+
getParentRoute: () => rootRouteImport,
45+
} as any)
46+
const IndexRoute = IndexRouteImport.update({
47+
id: '/',
48+
path: '/',
49+
getParentRoute: () => rootRouteImport,
50+
} as any)
51+
const SearchSearchPlaceholderRoute = SearchSearchPlaceholderRouteImport.update({
52+
id: '/searchPlaceholder',
53+
path: '/searchPlaceholder',
54+
getParentRoute: () => SearchRouteRoute,
55+
} as any)
56+
const ParamsParamsPlaceholderRoute = ParamsParamsPlaceholderRouteImport.update({
57+
id: '/$paramsPlaceholder',
58+
path: '/$paramsPlaceholder',
59+
getParentRoute: () => ParamsRouteRoute,
60+
} as any)
61+
62+
export interface FileRoutesByFullPath {
63+
'/': typeof IndexRoute
64+
'/params': typeof ParamsRouteRouteWithChildren
65+
'/search': typeof SearchRouteRouteWithChildren
66+
'/absolute': typeof AbsoluteRoute
67+
'/linkProps': typeof LinkPropsRoute
68+
'/relative': typeof RelativeRoute
69+
'/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
70+
'/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
71+
}
72+
export interface FileRoutesByTo {
73+
'/': typeof IndexRoute
74+
'/params': typeof ParamsRouteRouteWithChildren
75+
'/search': typeof SearchRouteRouteWithChildren
76+
'/absolute': typeof AbsoluteRoute
77+
'/linkProps': typeof LinkPropsRoute
78+
'/relative': typeof RelativeRoute
79+
'/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
80+
'/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
81+
}
82+
export interface FileRoutesById {
83+
__root__: typeof rootRouteImport
84+
'/': typeof IndexRoute
85+
'/params': typeof ParamsRouteRouteWithChildren
86+
'/search': typeof SearchRouteRouteWithChildren
87+
'/absolute': typeof AbsoluteRoute
88+
'/linkProps': typeof LinkPropsRoute
89+
'/relative': typeof RelativeRoute
90+
'/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
91+
'/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
92+
}
93+
export interface FileRouteTypes {
94+
fileRoutesByFullPath: FileRoutesByFullPath
95+
fullPaths:
96+
| '/'
97+
| '/params'
98+
| '/search'
99+
| '/absolute'
100+
| '/linkProps'
101+
| '/relative'
102+
| '/params/$paramsPlaceholder'
103+
| '/search/searchPlaceholder'
104+
fileRoutesByTo: FileRoutesByTo
105+
to:
106+
| '/'
107+
| '/params'
108+
| '/search'
109+
| '/absolute'
110+
| '/linkProps'
111+
| '/relative'
112+
| '/params/$paramsPlaceholder'
113+
| '/search/searchPlaceholder'
114+
id:
115+
| '__root__'
116+
| '/'
117+
| '/params'
118+
| '/search'
119+
| '/absolute'
120+
| '/linkProps'
121+
| '/relative'
122+
| '/params/$paramsPlaceholder'
123+
| '/search/searchPlaceholder'
124+
fileRoutesById: FileRoutesById
125+
}
126+
export interface RootRouteChildren {
127+
IndexRoute: typeof IndexRoute
128+
ParamsRouteRoute: typeof ParamsRouteRouteWithChildren
129+
SearchRouteRoute: typeof SearchRouteRouteWithChildren
130+
AbsoluteRoute: typeof AbsoluteRoute
131+
LinkPropsRoute: typeof LinkPropsRoute
132+
RelativeRoute: typeof RelativeRoute
133+
}
134+
135+
declare module '@tanstack/solid-router' {
136+
interface FileRoutesByPath {
137+
'/relative': {
138+
id: '/relative'
139+
path: '/relative'
140+
fullPath: '/relative'
141+
preLoaderRoute: typeof RelativeRouteImport
142+
parentRoute: typeof rootRouteImport
143+
}
144+
'/linkProps': {
145+
id: '/linkProps'
146+
path: '/linkProps'
147+
fullPath: '/linkProps'
148+
preLoaderRoute: typeof LinkPropsRouteImport
149+
parentRoute: typeof rootRouteImport
150+
}
151+
'/absolute': {
152+
id: '/absolute'
153+
path: '/absolute'
154+
fullPath: '/absolute'
155+
preLoaderRoute: typeof AbsoluteRouteImport
156+
parentRoute: typeof rootRouteImport
157+
}
158+
'/search': {
159+
id: '/search'
160+
path: '/search'
161+
fullPath: '/search'
162+
preLoaderRoute: typeof SearchRouteRouteImport
163+
parentRoute: typeof rootRouteImport
164+
}
165+
'/params': {
166+
id: '/params'
167+
path: '/params'
168+
fullPath: '/params'
169+
preLoaderRoute: typeof ParamsRouteRouteImport
170+
parentRoute: typeof rootRouteImport
171+
}
172+
'/': {
173+
id: '/'
174+
path: '/'
175+
fullPath: '/'
176+
preLoaderRoute: typeof IndexRouteImport
177+
parentRoute: typeof rootRouteImport
178+
}
179+
'/search/searchPlaceholder': {
180+
id: '/search/searchPlaceholder'
181+
path: '/searchPlaceholder'
182+
fullPath: '/search/searchPlaceholder'
183+
preLoaderRoute: typeof SearchSearchPlaceholderRouteImport
184+
parentRoute: typeof SearchRouteRoute
185+
}
186+
'/params/$paramsPlaceholder': {
187+
id: '/params/$paramsPlaceholder'
188+
path: '/$paramsPlaceholder'
189+
fullPath: '/params/$paramsPlaceholder'
190+
preLoaderRoute: typeof ParamsParamsPlaceholderRouteImport
191+
parentRoute: typeof ParamsRouteRoute
192+
}
193+
}
194+
}
195+
196+
interface ParamsRouteRouteChildren {
197+
ParamsParamsPlaceholderRoute: typeof ParamsParamsPlaceholderRoute
198+
}
199+
200+
const ParamsRouteRouteChildren: ParamsRouteRouteChildren = {
201+
ParamsParamsPlaceholderRoute: ParamsParamsPlaceholderRoute,
202+
}
203+
204+
const ParamsRouteRouteWithChildren = ParamsRouteRoute._addFileChildren(
205+
ParamsRouteRouteChildren,
206+
)
207+
208+
interface SearchRouteRouteChildren {
209+
SearchSearchPlaceholderRoute: typeof SearchSearchPlaceholderRoute
210+
}
211+
212+
const SearchRouteRouteChildren: SearchRouteRouteChildren = {
213+
SearchSearchPlaceholderRoute: SearchSearchPlaceholderRoute,
214+
}
215+
216+
const SearchRouteRouteWithChildren = SearchRouteRoute._addFileChildren(
217+
SearchRouteRouteChildren,
218+
)
219+
220+
const rootRouteChildren: RootRouteChildren = {
221+
IndexRoute: IndexRoute,
222+
ParamsRouteRoute: ParamsRouteRouteWithChildren,
223+
SearchRouteRoute: SearchRouteRouteWithChildren,
224+
AbsoluteRoute: AbsoluteRoute,
225+
LinkPropsRoute: LinkPropsRoute,
226+
RelativeRoute: RelativeRoute,
227+
}
228+
export const routeTree = rootRouteImport
229+
._addFileChildren(rootRouteChildren)
230+
._addFileTypes<FileRouteTypes>()

0 commit comments

Comments
 (0)