Skip to content

Commit 9181ae6

Browse files
AlemTuzlakAlemTuzlak
authored
Merge pull request #2 from TanStack/feat/add_shell
Created the inital setup and the devtools skeleton
2 parents ba99220 + 5d636dc commit 9181ae6

37 files changed

+2936
-7
lines changed

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,21 @@ npm install @tanstack/react-devtools
6868
npm install @tanstack/devtools # no framework, just vanilla js
6969
```
7070

71+
## Development
72+
73+
To contribute to the development of TanStack Devtools, you can clone the repository and run the following commands:
74+
75+
```bash
76+
pnpm install
77+
pnpm dev
78+
```
79+
80+
Then go to any of the example directories and run:
81+
82+
```bash
83+
pnpm dev
84+
```
85+
7186
## How to help?
7287

7388
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)

‎examples/react/basic/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
},
1111
"dependencies": {
1212
"@tanstack/react-devtools": "^0.0.0",
13+
"@tanstack/react-query": "^5.83.0",
14+
"@tanstack/react-query-devtools": "^5.83.0",
15+
"@tanstack/react-router": "^1.129.8",
16+
"@tanstack/react-router-devtools": "^1.129.8",
1317
"react": "^19.1.0",
1418
"react-dom": "^19.1.0"
1519
},

‎examples/react/basic/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import ReactDOM from 'react-dom/client'
2+
import Devtools from './setup'
23

34
function App() {
45
return (
56
<div>
67
<h1>TanStack Devtools Basic Example</h1>
8+
<Devtools />
79
</div>
810
)
911
}

‎examples/react/basic/src/setup.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
3+
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
4+
import {
5+
Outlet,
6+
Link,
7+
createRouter,
8+
createRoute,
9+
createRootRoute,
10+
} from '@tanstack/react-router'
11+
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
12+
import { Devtools } from '@tanstack/react-devtools'
13+
import { createRoot } from 'react-dom/client'
14+
15+
const rootRoute = createRootRoute({
16+
component: () => (
17+
<>
18+
<div className="p-2 flex gap-2">
19+
<Link to="/" className="[&.active]:font-bold">
20+
Home
21+
</Link>{' '}
22+
<Link to="/about" className="[&.active]:font-bold">
23+
About
24+
</Link>
25+
</div>
26+
<hr />
27+
<Outlet />
28+
<TanStackRouterDevtools />
29+
</>
30+
),
31+
})
32+
33+
const indexRoute = createRoute({
34+
getParentRoute: () => rootRoute,
35+
path: '/',
36+
component: function Index() {
37+
return (
38+
<div className="p-2">
39+
<h3>Welcome Home!</h3>
40+
</div>
41+
)
42+
},
43+
})
44+
45+
const aboutRoute = createRoute({
46+
getParentRoute: () => rootRoute,
47+
path: '/about',
48+
component: function About() {
49+
return <div className="p-2">Hello from About!</div>
50+
},
51+
})
52+
53+
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
54+
55+
const router = createRouter({ routeTree })
56+
57+
const queryClient = new QueryClient()
58+
59+
export default function DevtoolsExample() {
60+
return (
61+
<>
62+
<Devtools
63+
plugins={[
64+
{
65+
id: 'query',
66+
name: 'Tanstack Query',
67+
render: (el) =>
68+
createRoot(el).render(
69+
<QueryClientProvider client={queryClient}>
70+
<ReactQueryDevtoolsPanel />
71+
</QueryClientProvider>,
72+
),
73+
},
74+
{
75+
id: 'router',
76+
name: 'Tanstack Router',
77+
render: (el) =>
78+
createRoot(el).render(
79+
<TanStackRouterDevtoolsPanel router={router} />,
80+
),
81+
},
82+
]}
83+
/>
84+
</>
85+
)
86+
}

‎examples/solid/basic/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
},
1111
"dependencies": {
1212
"@tanstack/solid-devtools": "^0.0.0",
13+
"@tanstack/solid-query": "^5.83.0",
14+
"@tanstack/solid-query-devtools": "^5.83.0",
15+
"@tanstack/solid-router": "^1.129.8",
16+
"@tanstack/solid-router-devtools": "^1.129.8",
1317
"solid-js": "^1.9.5"
1418
},
1519
"devDependencies": {

‎examples/solid/basic/src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { render } from 'solid-js/web'
2-
2+
import Devtools from './setup'
33
function App() {
44
return (
55
<div>
66
<h1>TanStack Devtools Basic Example</h1>
7+
<Devtools />
78
</div>
89
)
910
}

‎examples/solid/basic/src/setup.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
2+
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
3+
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
4+
import {
5+
Outlet,
6+
createRouter,
7+
createRoute,
8+
createRootRoute,
9+
} from '@tanstack/solid-router'
10+
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
11+
import { Devtools } from '@tanstack/solid-devtools'
12+
import { Portal } from 'solid-js/web'
13+
14+
const rootRoute = createRootRoute({
15+
component: () => (
16+
<>
17+
<div class="p-2 flex gap-2"></div>
18+
<hr />
19+
<Outlet />
20+
<TanStackRouterDevtools />
21+
</>
22+
),
23+
})
24+
25+
const indexRoute = createRoute({
26+
getParentRoute: () => rootRoute,
27+
path: '/',
28+
component: function Index() {
29+
return (
30+
<div class="p-2">
31+
<h3>Welcome Home!</h3>
32+
</div>
33+
)
34+
},
35+
})
36+
37+
const aboutRoute = createRoute({
38+
getParentRoute: () => rootRoute,
39+
path: '/about',
40+
component: function About() {
41+
return <div class="p-2">Hello from About!</div>
42+
},
43+
})
44+
45+
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
46+
47+
const router = createRouter({ routeTree })
48+
49+
const queryClient = new QueryClient()
50+
51+
export default function DevtoolsExample() {
52+
return (
53+
<>
54+
<Devtools
55+
plugins={[
56+
{
57+
id: 'query',
58+
name: 'Tanstack Query',
59+
render: (el) => (
60+
<Portal mount={el}>
61+
{' '}
62+
<QueryClientProvider client={queryClient}>
63+
<SolidQueryDevtools />
64+
</QueryClientProvider>{' '}
65+
</Portal>
66+
),
67+
},
68+
{
69+
id: 'router',
70+
name: 'Tanstack Router',
71+
render: (el) => (
72+
<Portal mount={el}>
73+
<TanStackRouterDevtoolsPanel router={router} />
74+
</Portal>
75+
),
76+
},
77+
]}
78+
/>
79+
</>
80+
)
81+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"size-limit": [
4848
{
4949
"path": "packages/devtools/dist/esm/index.js",
50-
"limit": "6 KB"
50+
"limit": "20 KB"
5151
}
5252
],
5353
"devDependencies": {

‎packages/devtools/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,14 @@
5656
"test:types": "tsc",
5757
"test:build": "publint --strict",
5858
"build": "vite build"
59+
},
60+
"dependencies": {
61+
"@solid-primitives/keyboard": "^1.2.8",
62+
"clsx": "^2.1.1",
63+
"goober": "^2.1.16",
64+
"solid-js": "^1.9.5"
65+
},
66+
"devDependencies": {
67+
"vite-plugin-solid": "^2.11.6"
5968
}
6069
}

‎packages/devtools/src/components/content-panel.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useStyles } from '../styles/use-styles'
2+
import type { JSX } from 'solid-js/jsx-runtime'
3+
4+
export const ContentPanel = (props: {
5+
ref: (el: HTMLDivElement | undefined) => void
6+
children: JSX.Element
7+
handleDragStart?: (e: any) => void
8+
}) => {
9+
const styles = useStyles()
10+
return (
11+
<div ref={props.ref} class={styles().devtoolsPanel}>
12+
{props.handleDragStart ? (
13+
<div
14+
class={styles().dragHandle}
15+
onMouseDown={props.handleDragStart}
16+
></div>
17+
) : null}
18+
{props.children}
19+
</div>
20+
)
21+
}

0 commit comments

Comments
 (0)