Skip to content

Commit 4c831da

Browse files
KevinVandyKevinVandy
authored
feat: add devtools project (#452)
* feat: add devtools project * update verbage a little. add frameworks
1 parent f97d3ed commit 4c831da

4 files changed

Lines changed: 316 additions & 1 deletion

File tree

‎src/libraries/devtools.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
2+
import { Library } from '.'
3+
import { BiBookAlt } from 'react-icons/bi'
4+
import { VscWand } from 'react-icons/vsc'
5+
import { twMerge } from 'tailwind-merge'
6+
7+
const repo = 'tanstack/devtools'
8+
9+
const textStyles = 'text-gray-700 dark:text-gray-500'
10+
11+
export const devtoolsProject = {
12+
id: 'devtools',
13+
name: 'TanStack Devtools',
14+
cardStyles: `shadow-xl shadow-slate-700/20 dark:shadow-lg dark:shadow-slate-500/30 text-slate-400 border-2 border-transparent hover:border-current`,
15+
to: '/devtools',
16+
tagline: `Centralized devtools panel for TanStack libraries and other custom devtools`,
17+
description: `A unified devtools panel that houses all TanStack devtools and allows you to create and integrate your own custom devtools.`,
18+
ogImage:
19+
'https://github.com/tanstack/devtools/raw/main/media/repo-header.png',
20+
badge: 'alpha',
21+
bgStyle: 'bg-slate-400',
22+
textStyle: 'text-slate-400',
23+
repo,
24+
latestBranch: 'main',
25+
latestVersion: 'v0',
26+
availableVersions: ['v0'],
27+
colorFrom: 'from-slate-400',
28+
colorTo: 'to-slate-600',
29+
textColor: 'text-slate-600',
30+
frameworks: ['react', 'solid', 'vanilla'],
31+
menu: [
32+
{
33+
icon: <BiBookAlt />,
34+
label: 'Docs',
35+
to: '/devtools/latest/docs',
36+
},
37+
{
38+
icon: <FaGithub />,
39+
label: 'Github',
40+
to: `https://github.com/${repo}`,
41+
},
42+
],
43+
featureHighlights: [
44+
{
45+
title: 'Unified Devtools Panel',
46+
icon: <VscWand className="text-slate-400" />,
47+
description: (
48+
<div>
49+
TanStack Devtools provides a centralized panel that houses all
50+
TanStack library devtools in one place. No more switching between
51+
different devtools panels - everything you need is{' '}
52+
<span className={twMerge('font-semibold', textStyles)}>
53+
organized and accessible from a single interface
54+
</span>{' '}
55+
for a streamlined development experience.
56+
</div>
57+
),
58+
},
59+
{
60+
title: 'Framework Agnostic',
61+
icon: <FaBolt className="text-slate-500" />,
62+
description: (
63+
<div>
64+
Built with Solid.js for lightweight performance, but designed to work
65+
within any framework. Create and integrate your own custom devtools
66+
regardless of your tech stack.{' '}
67+
<span className={twMerge('font-semibold', textStyles)}>
68+
Whether you're using React, Vue, Angular, or any other framework,
69+
</span>{' '}
70+
TanStack Devtools provides the flexibility you need.
71+
</div>
72+
),
73+
},
74+
{
75+
title: 'Custom Devtools Support',
76+
icon: <FaCogs className="text-slate-600" />,
77+
description: (
78+
<div>
79+
Extend the devtools panel with your own custom devtools. The platform
80+
is designed to be extensible, allowing you to create devtools for your
81+
specific needs and integrate them seamlessly.{' '}
82+
<span className={twMerge('font-semibold', textStyles)}>
83+
Build, share, and use custom devtools that enhance your development
84+
workflow
85+
</span>{' '}
86+
while maintaining the same unified experience.
87+
</div>
88+
),
89+
},
90+
],
91+
} satisfies Library

‎src/libraries/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { rangerProject } from './ranger'
1818
import { storeProject } from './store'
1919
import { pacerProject } from './pacer'
2020
import { dbProject } from './db'
21+
import { devtoolsProject } from './devtools'
2122

2223
export const frameworkOptions = [
2324
{ label: 'React', value: 'react', logo: reactLogo, color: 'bg-blue-500' },
@@ -56,6 +57,7 @@ export type Library = {
5657
| 'pacer'
5758
| 'db'
5859
| 'config'
60+
| 'devtools'
5961
| 'react-charts'
6062
| 'create-tsrouter-app'
6163
name: string
@@ -111,6 +113,7 @@ export const libraries = [
111113
rangerProject,
112114
dbProject,
113115
configProject,
116+
devtoolsProject,
114117
{
115118
id: 'react-charts',
116119
name: 'React Charts',
@@ -133,7 +136,7 @@ export const librariesByGroup = {
133136
pacerProject,
134137
],
135138
headlessUI: [tableProject, formProject, virtualProject, rangerProject],
136-
other: [configProject],
139+
other: [devtoolsProject, configProject],
137140
}
138141

139142
export const librariesGroupNamesMap = {

‎src/routeTree.gen.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { Route as LibrariesRangerVersionIndexRouteImport } from './routes/_libra
4848
import { Route as LibrariesQueryVersionIndexRouteImport } from './routes/_libraries/query.$version.index'
4949
import { Route as LibrariesPacerVersionIndexRouteImport } from './routes/_libraries/pacer.$version.index'
5050
import { Route as LibrariesFormVersionIndexRouteImport } from './routes/_libraries/form.$version.index'
51+
import { Route as LibrariesDevtoolsVersionIndexRouteImport } from './routes/_libraries/devtools.$version.index'
5152
import { Route as LibrariesDbVersionIndexRouteImport } from './routes/_libraries/db.$version.index'
5253
import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libraries/config.$version.index'
5354
import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index'
@@ -230,6 +231,12 @@ const LibrariesFormVersionIndexRoute =
230231
path: '/form/$version/',
231232
getParentRoute: () => LibrariesRouteRoute,
232233
} as any)
234+
const LibrariesDevtoolsVersionIndexRoute =
235+
LibrariesDevtoolsVersionIndexRouteImport.update({
236+
id: '/devtools/$version/',
237+
path: '/devtools/$version/',
238+
getParentRoute: () => LibrariesRouteRoute,
239+
} as any)
233240
const LibrariesDbVersionIndexRoute = LibrariesDbVersionIndexRouteImport.update({
234241
id: '/db/$version/',
235242
path: '/db/$version/',
@@ -326,6 +333,7 @@ export interface FileRoutesByFullPath {
326333
'/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
327334
'/config/$version': typeof LibrariesConfigVersionIndexRoute
328335
'/db/$version': typeof LibrariesDbVersionIndexRoute
336+
'/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute
329337
'/form/$version': typeof LibrariesFormVersionIndexRoute
330338
'/pacer/$version': typeof LibrariesPacerVersionIndexRoute
331339
'/query/$version': typeof LibrariesQueryVersionIndexRoute
@@ -365,6 +373,7 @@ export interface FileRoutesByTo {
365373
'/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
366374
'/config/$version': typeof LibrariesConfigVersionIndexRoute
367375
'/db/$version': typeof LibrariesDbVersionIndexRoute
376+
'/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute
368377
'/form/$version': typeof LibrariesFormVersionIndexRoute
369378
'/pacer/$version': typeof LibrariesPacerVersionIndexRoute
370379
'/query/$version': typeof LibrariesQueryVersionIndexRoute
@@ -409,6 +418,7 @@ export interface FileRoutesById {
409418
'/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
410419
'/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute
411420
'/_libraries/db/$version/': typeof LibrariesDbVersionIndexRoute
421+
'/_libraries/devtools/$version/': typeof LibrariesDevtoolsVersionIndexRoute
412422
'/_libraries/form/$version/': typeof LibrariesFormVersionIndexRoute
413423
'/_libraries/pacer/$version/': typeof LibrariesPacerVersionIndexRoute
414424
'/_libraries/query/$version/': typeof LibrariesQueryVersionIndexRoute
@@ -453,6 +463,7 @@ export interface FileRouteTypes {
453463
| '/$libraryId/$version/docs/'
454464
| '/config/$version'
455465
| '/db/$version'
466+
| '/devtools/$version'
456467
| '/form/$version'
457468
| '/pacer/$version'
458469
| '/query/$version'
@@ -492,6 +503,7 @@ export interface FileRouteTypes {
492503
| '/$libraryId/$version/docs'
493504
| '/config/$version'
494505
| '/db/$version'
506+
| '/devtools/$version'
495507
| '/form/$version'
496508
| '/pacer/$version'
497509
| '/query/$version'
@@ -535,6 +547,7 @@ export interface FileRouteTypes {
535547
| '/$libraryId/$version/docs/'
536548
| '/_libraries/config/$version/'
537549
| '/_libraries/db/$version/'
550+
| '/_libraries/devtools/$version/'
538551
| '/_libraries/form/$version/'
539552
| '/_libraries/pacer/$version/'
540553
| '/_libraries/query/$version/'
@@ -796,6 +809,13 @@ declare module '@tanstack/react-router' {
796809
preLoaderRoute: typeof LibrariesDbVersionIndexRouteImport
797810
parentRoute: typeof LibrariesRouteRoute
798811
}
812+
'/_libraries/devtools/$version/': {
813+
id: '/_libraries/devtools/$version/'
814+
path: '/devtools/$version'
815+
fullPath: '/devtools/$version'
816+
preLoaderRoute: typeof LibrariesDevtoolsVersionIndexRouteImport
817+
parentRoute: typeof LibrariesRouteRoute
818+
}
799819
'/_libraries/form/$version/': {
800820
id: '/_libraries/form/$version/'
801821
path: '/form/$version'
@@ -1101,6 +1121,13 @@ declare module '@tanstack/react-start/server' {
11011121
preLoaderRoute: unknown
11021122
parentRoute: typeof rootServerRouteImport
11031123
}
1124+
'/_libraries/devtools/$version/': {
1125+
id: '/_libraries/devtools/$version/'
1126+
path: '/devtools/$version'
1127+
fullPath: '/devtools/$version'
1128+
preLoaderRoute: unknown
1129+
parentRoute: typeof rootServerRouteImport
1130+
}
11041131
'/_libraries/form/$version/': {
11051132
id: '/_libraries/form/$version/'
11061133
path: '/form/$version'
@@ -1695,6 +1722,23 @@ declare module './routes/_libraries/db.$version.index' {
16951722
unknown
16961723
>
16971724
}
1725+
declare module './routes/_libraries/devtools.$version.index' {
1726+
const createFileRoute: CreateFileRoute<
1727+
'/_libraries/devtools/$version/',
1728+
FileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'],
1729+
FileRoutesByPath['/_libraries/devtools/$version/']['id'],
1730+
FileRoutesByPath['/_libraries/devtools/$version/']['path'],
1731+
FileRoutesByPath['/_libraries/devtools/$version/']['fullPath']
1732+
>
1733+
1734+
const createServerFileRoute: CreateServerFileRoute<
1735+
ServerFileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'],
1736+
ServerFileRoutesByPath['/_libraries/devtools/$version/']['id'],
1737+
ServerFileRoutesByPath['/_libraries/devtools/$version/']['path'],
1738+
ServerFileRoutesByPath['/_libraries/devtools/$version/']['fullPath'],
1739+
unknown
1740+
>
1741+
}
16981742
declare module './routes/_libraries/form.$version.index' {
16991743
const createFileRoute: CreateFileRoute<
17001744
'/_libraries/form/$version/',
@@ -2015,6 +2059,7 @@ interface LibrariesRouteRouteChildren {
20152059
LibrariesAccountSplatRoute: typeof LibrariesAccountSplatRoute
20162060
LibrariesConfigVersionIndexRoute: typeof LibrariesConfigVersionIndexRoute
20172061
LibrariesDbVersionIndexRoute: typeof LibrariesDbVersionIndexRoute
2062+
LibrariesDevtoolsVersionIndexRoute: typeof LibrariesDevtoolsVersionIndexRoute
20182063
LibrariesFormVersionIndexRoute: typeof LibrariesFormVersionIndexRoute
20192064
LibrariesPacerVersionIndexRoute: typeof LibrariesPacerVersionIndexRoute
20202065
LibrariesQueryVersionIndexRoute: typeof LibrariesQueryVersionIndexRoute
@@ -2041,6 +2086,7 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = {
20412086
LibrariesAccountSplatRoute: LibrariesAccountSplatRoute,
20422087
LibrariesConfigVersionIndexRoute: LibrariesConfigVersionIndexRoute,
20432088
LibrariesDbVersionIndexRoute: LibrariesDbVersionIndexRoute,
2089+
LibrariesDevtoolsVersionIndexRoute: LibrariesDevtoolsVersionIndexRoute,
20442090
LibrariesFormVersionIndexRoute: LibrariesFormVersionIndexRoute,
20452091
LibrariesPacerVersionIndexRoute: LibrariesPacerVersionIndexRoute,
20462092
LibrariesQueryVersionIndexRoute: LibrariesQueryVersionIndexRoute,

0 commit comments

Comments
 (0)