Skip to content

Commit 42104eb

Browse files
birkskyumautofix-ci[bot]
authored and
roduyemi
committed
docs(solid-router): quickstart example (code based) (TanStack#5830)
* docs(solid-router): quickstart example * link new example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 270001f commit 42104eb

File tree

12 files changed

+205
-70
lines changed

12 files changed

+205
-70
lines changed

‎docs/router/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,10 @@
610610
"label": "Quickstart (file-based)",
611611
"to": "framework/solid/examples/quickstart-file-based"
612612
},
613+
{
614+
"label": "Quickstart (code-based)",
615+
"to": "framework/solid/examples/quickstart"
616+
},
613617
{
614618
"label": "Basic (file-based)",
615619
"to": "framework/solid/examples/basic-file-based"

‎examples/solid/quickstart/.gitignore‎

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

‎examples/solid/quickstart/.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/quickstart/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/quickstart/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/quickstart/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "tanstack-router-solid-example-quickstart",
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+
},
11+
"dependencies": {
12+
"@tailwindcss/postcss": "^4.1.15",
13+
"@tanstack/solid-router": "^1.135.2",
14+
"@tanstack/solid-router-devtools": "^1.135.2",
15+
"postcss": "^8.5.1",
16+
"solid-js": "^1.9.10",
17+
"tailwindcss": "^4.1.15"
18+
},
19+
"devDependencies": {
20+
"vite-plugin-solid": "^2.11.10",
21+
"typescript": "^5.7.2",
22+
"vite": "^7.1.7"
23+
}
24+
}

‎examples/solid/quickstart/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/quickstart/src/main.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { render } from 'solid-js/web'
2+
import {
3+
Link,
4+
Outlet,
5+
RouterProvider,
6+
createRootRoute,
7+
createRoute,
8+
createRouter,
9+
} from '@tanstack/solid-router'
10+
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
11+
import './styles.css'
12+
13+
const rootRoute = createRootRoute({
14+
component: () => (
15+
<>
16+
<div class="p-2 flex gap-2">
17+
<Link to="/" class="[&.active]:font-bold">
18+
Home
19+
</Link>{' '}
20+
<Link to="/about" class="[&.active]:font-bold">
21+
About
22+
</Link>
23+
</div>
24+
<hr />
25+
<Outlet />
26+
<TanStackRouterDevtools />
27+
</>
28+
),
29+
})
30+
31+
const indexRoute = createRoute({
32+
getParentRoute: () => rootRoute,
33+
path: '/',
34+
component: function Index() {
35+
return (
36+
<div class="p-2">
37+
<h3>Welcome Home!</h3>
38+
</div>
39+
)
40+
},
41+
})
42+
43+
const aboutRoute = createRoute({
44+
getParentRoute: () => rootRoute,
45+
path: '/about',
46+
component: function About() {
47+
return <div class="p-2">Hello from About!</div>
48+
},
49+
})
50+
51+
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
52+
53+
const router = createRouter({
54+
routeTree,
55+
defaultPreload: 'intent',
56+
scrollRestoration: true,
57+
})
58+
59+
declare module '@tanstack/solid-router' {
60+
interface Register {
61+
router: typeof router
62+
}
63+
}
64+
65+
const rootElement = document.getElementById('app')!
66+
67+
if (!rootElement.innerHTML) {
68+
render(() => <RouterProvider router={router} />, rootElement)
69+
}

‎examples/solid/quickstart/src/styles.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import 'tailwindcss';
2+
3+
@layer base {
4+
*,
5+
::after,
6+
::before,
7+
::backdrop,
8+
::file-selector-button {
9+
border-color: var(--color-gray-200, currentcolor);
10+
}
11+
}
12+
13+
html {
14+
color-scheme: light dark;
15+
}
16+
* {
17+
@apply border-gray-200 dark:border-gray-800;
18+
}
19+
body {
20+
@apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
21+
}

‎examples/solid/quickstart/tsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"esModuleInterop": true,
5+
"jsx": "preserve",
6+
"jsxImportSource": "solid-js",
7+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
8+
"skipLibCheck": true
9+
}
10+
}

0 commit comments

Comments
 (0)