Skip to content

Commit 34faa75

Browse files
Daydreamer-ririDaydreamer-riri
authored
feat: support tanstack router (#37)
Now you can use the tanstack router to build your static page application!
1 parent c7490d2 commit 34faa75

34 files changed

+3843
-432
lines changed

‎build.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default defineBuildConfig({
44
entries: [
55
{ input: 'src/index', name: 'index' },
66
{ input: 'src/client/single-page', name: 'client/single-page' },
7+
{ input: 'src/client/tanstack', name: 'tanstack' },
78
{ input: 'src/node/cli', name: 'node/cli' },
89
{ input: 'src/node', name: 'node' },
910
{ input: 'src/style-collectors/styled-components', name: 'style-collectors/styled-components' },
@@ -16,6 +17,10 @@ export default defineBuildConfig({
1617
'react-dom/server',
1718
'react-router-dom',
1819
'react-router-dom/server',
20+
'@tanstack/react-router',
21+
'@tanstack/start/client',
22+
'@tanstack/start/server',
23+
'@tanstack/start',
1924
],
2025
rollup: {
2126
emitCJS: true,

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default ririd({
55
rules: {
66
'ts/no-unsafe-function-type': 'off',
77
'ts/no-unused-expressions': 'off',
8+
'eslint-comments/no-unlimited-disable': 'off',
89
},
910
}, {
1011
files: ['**/*.md/**/*.html'],

‎examples/tanstack/.gitignore‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎examples/tanstack/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
67
<title>Vite App</title>
78
<script src="https://cdn.tailwindcss.com"></script>
89
<style type="text/tailwindcss">
@@ -18,7 +19,7 @@
1819
</style>
1920
</head>
2021
<body>
21-
<div id="app"></div>
22+
<div id="root"></div>
2223
<script type="module" src="/src/main.tsx"></script>
2324
</body>
2425
</html>

‎examples/tanstack/package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@
55
"private": true,
66
"scripts": {
77
"typecheck": "tsc --noEmit",
8-
"dev": "vite --port=3001",
9-
"build": "vite build",
8+
"dev": "vite-react-ssg dev",
9+
"dev:csr": "vite",
10+
"build": "vite-react-ssg build",
1011
"serve": "vite preview",
1112
"start": "vite"
1213
},
1314
"dependencies": {
14-
"@tanstack/react-router": "^1.57.15"
15+
"shiki": "^1.11.1",
16+
"vite-react-ssg": "workspace:*"
1517
},
1618
"devDependencies": {
17-
"@tanstack/router-plugin": "^1.57.15"
19+
"@tanstack/router-plugin": "^1.57.15",
20+
"@vitejs/plugin-react": "^4.3.1"
1821
}
1922
}

‎examples/tanstack/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/tanstack/src/count.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useState } from 'react'
2+
3+
export function Count() {
4+
const [count, setCount] = useState(0)
5+
6+
return (
7+
<button
8+
className="w-20 bg-gray"
9+
type="button"
10+
onClick={() => setCount(count + 1)}
11+
>
12+
{count}
13+
</button>
14+
)
15+
}

‎examples/tanstack/src/main.tsx‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom/client'
3-
import { RouterProvider, createRouter } from '@tanstack/react-router'
1+
import { createRouter } from '@tanstack/react-router'
2+
import { ViteReactSSG } from 'vite-react-ssg/tanstack'
43
import { routeTree } from './routeTree.gen'
54

65
// Set up a Router instance
6+
77
const router = createRouter({
88
routeTree,
99
defaultPreload: 'intent',
10+
basepath: import.meta.env.BASE_URL,
1011
})
1112

1213
// Register things for typesafety
@@ -16,9 +17,33 @@ declare module '@tanstack/react-router' {
1617
}
1718
}
1819

19-
const rootElement = document.getElementById('app')!
20+
// const rootElement = document.getElementById('app')!
21+
// const OriginComponent = routeTree.options.component!
22+
// function component() {
23+
// return (
24+
// <Html>
25+
// <Head>
26+
// <Meta />
27+
// </Head>
28+
// <Body>
29+
// {/* <div id="root"> */}
30+
// <OriginComponent />
31+
// {/* </div> */}
32+
// </Body>
33+
// </Html>
34+
// )
35+
// }
36+
// routeTree.update({
37+
// component,
38+
// })
39+
40+
export const createRoot = ViteReactSSG({
41+
router,
42+
routes: routeTree,
43+
basename: import.meta.env.BASE_URL,
44+
}, () => {})
2045

21-
if (!rootElement.innerHTML) {
22-
const root = ReactDOM.createRoot(rootElement)
23-
root.render(<RouterProvider router={router} />)
46+
if (false) {
47+
// const root = ReactDOM.createRoot(rootElement)
48+
// root.render(<RouterProvider router={router} />)
2449
}

‎examples/tanstack/src/routeTree.gen.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/* prettier-ignore-start */
2+
3+
/* eslint-disable */
4+
5+
// @ts-nocheck
6+
7+
// noinspection JSUnusedGlobalSymbols
8+
9+
// This file is auto-generated by TanStack Router
10+
11+
// Import Routes
12+
13+
import { Route as rootRoute } from './routes/__root'
14+
import { Route as JsonImport } from './routes/json'
15+
import { Route as AboutImport } from './routes/about'
16+
import { Route as IndexImport } from './routes/index'
17+
import { Route as DynamicParamImport } from './routes/dynamic/$param'
18+
19+
// Create/Update Routes
20+
21+
const JsonRoute = JsonImport.update({
22+
path: '/json',
23+
getParentRoute: () => rootRoute,
24+
} as any)
25+
26+
const AboutRoute = AboutImport.update({
27+
path: '/about',
28+
getParentRoute: () => rootRoute,
29+
} as any)
30+
31+
const IndexRoute = IndexImport.update({
32+
path: '/',
33+
getParentRoute: () => rootRoute,
34+
} as any)
35+
36+
const DynamicParamRoute = DynamicParamImport.update({
37+
path: '/dynamic/$param',
38+
getParentRoute: () => rootRoute,
39+
} as any)
40+
41+
// Populate the FileRoutesByPath interface
42+
43+
declare module '@tanstack/react-router' {
44+
interface FileRoutesByPath {
45+
'/': {
46+
id: '/'
47+
path: '/'
48+
fullPath: '/'
49+
preLoaderRoute: typeof IndexImport
50+
parentRoute: typeof rootRoute
51+
}
52+
'/about': {
53+
id: '/about'
54+
path: '/about'
55+
fullPath: '/about'
56+
preLoaderRoute: typeof AboutImport
57+
parentRoute: typeof rootRoute
58+
}
59+
'/json': {
60+
id: '/json'
61+
path: '/json'
62+
fullPath: '/json'
63+
preLoaderRoute: typeof JsonImport
64+
parentRoute: typeof rootRoute
65+
}
66+
'/dynamic/$param': {
67+
id: '/dynamic/$param'
68+
path: '/dynamic/$param'
69+
fullPath: '/dynamic/$param'
70+
preLoaderRoute: typeof DynamicParamImport
71+
parentRoute: typeof rootRoute
72+
}
73+
}
74+
}
75+
76+
// Create and export the route tree
77+
78+
export interface FileRoutesByFullPath {
79+
'/': typeof IndexRoute
80+
'/about': typeof AboutRoute
81+
'/json': typeof JsonRoute
82+
'/dynamic/$param': typeof DynamicParamRoute
83+
}
84+
85+
export interface FileRoutesByTo {
86+
'/': typeof IndexRoute
87+
'/about': typeof AboutRoute
88+
'/json': typeof JsonRoute
89+
'/dynamic/$param': typeof DynamicParamRoute
90+
}
91+
92+
export interface FileRoutesById {
93+
__root__: typeof rootRoute
94+
'/': typeof IndexRoute
95+
'/about': typeof AboutRoute
96+
'/json': typeof JsonRoute
97+
'/dynamic/$param': typeof DynamicParamRoute
98+
}
99+
100+
export interface FileRouteTypes {
101+
fileRoutesByFullPath: FileRoutesByFullPath
102+
fullPaths: '/' | '/about' | '/json' | '/dynamic/$param'
103+
fileRoutesByTo: FileRoutesByTo
104+
to: '/' | '/about' | '/json' | '/dynamic/$param'
105+
id: '__root__' | '/' | '/about' | '/json' | '/dynamic/$param'
106+
fileRoutesById: FileRoutesById
107+
}
108+
109+
export interface RootRouteChildren {
110+
IndexRoute: typeof IndexRoute
111+
AboutRoute: typeof AboutRoute
112+
JsonRoute: typeof JsonRoute
113+
DynamicParamRoute: typeof DynamicParamRoute
114+
}
115+
116+
const rootRouteChildren: RootRouteChildren = {
117+
IndexRoute: IndexRoute,
118+
AboutRoute: AboutRoute,
119+
JsonRoute: JsonRoute,
120+
DynamicParamRoute: DynamicParamRoute,
121+
}
122+
123+
export const routeTree = rootRoute
124+
._addFileChildren(rootRouteChildren)
125+
._addFileTypes<FileRouteTypes>()
126+
127+
/* prettier-ignore-end */
128+
129+
/* ROUTE_MANIFEST_START
130+
{
131+
"routes": {
132+
"__root__": {
133+
"filePath": "__root.tsx",
134+
"children": [
135+
"/",
136+
"/about",
137+
"/json",
138+
"/dynamic/$param"
139+
]
140+
},
141+
"/": {
142+
"filePath": "index.tsx"
143+
},
144+
"/about": {
145+
"filePath": "about.tsx"
146+
},
147+
"/json": {
148+
"filePath": "json.tsx"
149+
},
150+
"/dynamic/$param": {
151+
"filePath": "dynamic/$param.tsx"
152+
}
153+
}
154+
}
155+
ROUTE_MANIFEST_END */

‎examples/tanstack/src/routes/__root.tsx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
3-
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
3+
import { Count } from '../count'
44

55
export const Route = createRootRoute({
66
component: RootComponent,
@@ -28,10 +28,37 @@ function RootComponent() {
2828
>
2929
About
3030
</Link>
31+
<Link
32+
to="/dynamic/$param"
33+
params={{ param: 'path1' }}
34+
activeProps={{
35+
className: 'font-bold',
36+
}}
37+
>
38+
path1
39+
</Link>
40+
<Link
41+
to="/dynamic/$param"
42+
params={{ param: 'path2' }}
43+
activeProps={{
44+
className: 'font-bold',
45+
}}
46+
>
47+
path2
48+
</Link>
49+
<Link
50+
to="/json"
51+
search={{ query: 1 }}
52+
activeProps={{
53+
className: 'font-bold',
54+
}}
55+
>
56+
json
57+
</Link>
3158
</div>
3259
<hr />
3360
<Outlet />
34-
<TanStackRouterDevtools position="bottom-right" />
61+
<Count />
3562
</>
3663
)
3764
}

0 commit comments

Comments
 (0)