Skip to content

Commit 6356509

Browse files
AlemTuzlakAlemTuzlak
committed
feat: add plugins tab functionality in
1 parent 65c8e08 commit 6356509

File tree

14 files changed

+708
-27
lines changed

14 files changed

+708
-27
lines changed

‎examples/react/basic/package.json

Lines changed: 5 additions & 1 deletion
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
},
@@ -31,4 +35,4 @@
3135
"last 1 safari version"
3236
]
3337
}
34-
}
38+
}

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import ReactDOM from 'react-dom/client'
2-
import { Devtools } from '@tanstack/react-devtools'
2+
import Devtools from './setup'
3+
34
function App() {
45
return (
56
<div>
67
<h1>TanStack Devtools Basic Example</h1>
7-
<Devtools
8-
options={{
9-
openHotkey: ['Shift', 'B'],
10-
}}
11-
/>
8+
<Devtools />
129
</div>
1310
)
1411
}

‎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/react/basic/vite.config.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,4 @@ export default defineConfig({
1010
// },
1111
}),
1212
],
13-
ssr: {
14-
external: ['@tanstack/react-devtools'],
15-
},
1613
})

‎examples/solid/basic/package.json

Lines changed: 5 additions & 1 deletion
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": {
@@ -28,4 +32,4 @@
2832
"last 1 safari version"
2933
]
3034
}
31-
}
35+
}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import { render } from 'solid-js/web'
2-
import { Devtools } from '@tanstack/solid-devtools'
2+
import Devtools from './setup'
33
function App() {
44
return (
55
<div>
66
<h1>TanStack Devtools Basic Example</h1>
7-
<Devtools
8-
options={{
9-
openHotkey: ['Shift', 'B'],
10-
}}
11-
/>
7+
<Devtools />
128
</div>
139
)
1410
}

‎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+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { createEffect, createSignal } from 'solid-js'
22
import { useDevtoolsState } from '../context/use-devtools-context'
33
import { tabs } from '../tabs'
4+
import { useStyles } from '../styles/use-styles'
45
import type { JSX } from 'solid-js'
56

67
export const TabContent = () => {
78
const { state } = useDevtoolsState()
9+
const styles = useStyles()
810
const [component, setComponent] = createSignal<JSX.Element | null>(
9-
tabs.find((t) => t.id === state().activeTab)?.component || null,
11+
tabs.find((t) => t.id === state().activeTab)?.component() || null,
1012
)
1113
createEffect(() => {
1214
setComponent(
13-
tabs.find((t) => t.id === state().activeTab)?.component || null,
15+
tabs.find((t) => t.id === state().activeTab)?.component() || null,
1416
)
1517
})
1618

17-
return <div>{component()}</div>
19+
return <div class={styles().tabContent}>{component()}</div>
1820
}

‎packages/devtools/src/context/devtools-context.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import type { Setter } from 'solid-js'
1313
import type { JSX } from 'solid-js/jsx-runtime'
1414

1515
export interface DevtoolsPlugin {
16-
name: string | ((el: HTMLDivElement) => void)
16+
name: string | ((el: HTMLHeadingElement) => void)
1717
id: string
18-
component: (el: HTMLDivElement) => void
18+
render: (el: HTMLDivElement) => void
1919
}
2020

2121
export const DevtoolsContext = createContext<{

‎packages/devtools/src/context/use-devtools-context.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createMemo, useContext } from 'solid-js'
22
import { DevtoolsContext } from './devtools-context.jsx'
3+
import type { DevtoolsPlugin } from './devtools-context.jsx';
34
/* import type { DevtoolsPlugin } from './devtools-context' */
45
import type { DevtoolsStore } from './devtools-store.js'
56

@@ -16,7 +17,7 @@ const useDevtoolsContext = () => {
1617
}
1718
return context
1819
}
19-
/*
20+
2021
export const usePlugins = () => {
2122
const { store, setStore } = useDevtoolsContext()
2223

@@ -34,7 +35,7 @@ export const usePlugins = () => {
3435
}
3536

3637
return { plugins, setActivePlugin, activePlugin }
37-
} */
38+
}
3839

3940
export const useDevtoolsState = () => {
4041
const { store, setStore } = useDevtoolsContext()

0 commit comments

Comments
 (0)