Skip to content

Commit b961381

Browse files
AlemTuzlakAlemTuzlak
committed
feat: add start devtools
1 parent 0babe5d commit b961381

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2266
-48
lines changed

‎examples/react/start-basic-react-query/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99
"start": "vite start"
1010
},
1111
"dependencies": {
12+
"@tanstack/devtools-vite": "^0.3.3",
13+
"@tanstack/react-devtools": "^0.7.0",
1214
"@tanstack/react-query": "^5.66.0",
1315
"@tanstack/react-query-devtools": "^5.66.0",
1416
"@tanstack/react-router": "^1.132.7",
1517
"@tanstack/react-router-ssr-query": "^1.132.7",
1618
"@tanstack/react-router-devtools": "^1.132.7",
1719
"@tanstack/react-start": "^1.132.9",
20+
"@tanstack/react-start-devtools": "0.0.1",
1821
"react": "^19.0.0",
1922
"react-dom": "^19.0.0",
2023
"redaxios": "^0.5.1",
@@ -25,11 +28,11 @@
2528
"@types/react": "^19.0.8",
2629
"@types/react-dom": "^19.0.3",
2730
"@vitejs/plugin-react": "^4.3.4",
28-
"postcss": "^8.5.1",
2931
"autoprefixer": "^10.4.20",
32+
"postcss": "^8.5.1",
3033
"tailwindcss": "^3.4.17",
3134
"typescript": "^5.7.2",
3235
"vite": "^7.1.1",
3336
"vite-tsconfig-paths": "^5.1.4"
3437
}
35-
}
38+
}

‎examples/react/start-basic-react-query/src/routes/__root.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import {
77
createRootRouteWithContext,
88
} from '@tanstack/react-router'
99
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
10-
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
10+
import { TanStackRouterDevtools, TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
1111
import * as React from 'react'
12+
import { TanStackDevtools } from '@tanstack/react-devtools'
13+
import { StartDevtoolsPanel } from '@tanstack/react-start-devtools'
1214
import type { QueryClient } from '@tanstack/react-query'
1315
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
1416
import { NotFound } from '~/components/NotFound'
@@ -136,6 +138,20 @@ function RootDocument({ children }: { children: React.ReactNode }) {
136138
</div>
137139
<hr />
138140
{children}
141+
<TanStackDevtools plugins={[
142+
{
143+
name: 'React Query',
144+
render: () => <TanStackRouterDevtoolsPanel />
145+
},
146+
{
147+
name: 'React Router',
148+
render: () => <TanStackRouterDevtoolsPanel />
149+
},
150+
{
151+
name: "Start",
152+
render: () => <StartDevtoolsPanel />
153+
}
154+
]} />
139155
<TanStackRouterDevtools position="bottom-right" />
140156
<ReactQueryDevtools buttonPosition="bottom-left" />
141157
<Scripts />

‎examples/react/start-basic-react-query/vite.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
22
import { defineConfig } from 'vite'
33
import tsConfigPaths from 'vite-tsconfig-paths'
44
import viteReact from '@vitejs/plugin-react'
5+
import { devtools } from '@tanstack/devtools-vite'
56

67
export default defineConfig({
78
server: {
89
port: 3000,
910
},
1011
plugins: [
12+
devtools(),
1113
tsConfigPaths({
1214
projects: ['./tsconfig.json'],
1315
}),

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
"@eslint-react/eslint-plugin": "^1.26.2",
4040
"@playwright/test": "^1.52.0",
4141
"@tanstack/config": "^0.16.1",
42-
"@tanstack/react-query": "5.66.0",
4342
"@tanstack/query-core": "5.66.0",
43+
"@tanstack/react-query": "5.66.0",
4444
"@types/node": "^22.10.2",
4545
"@types/react": "^19.0.8",
4646
"@types/react-dom": "^19.0.3",
@@ -104,6 +104,9 @@
104104
"@tanstack/solid-start-client": "workspace:*",
105105
"@tanstack/solid-start-server": "workspace:*",
106106
"@tanstack/start-plugin-core": "workspace:*",
107+
"@tanstack/start-devtools": "workspace:*",
108+
"@tanstack/start-react-devtools": "workspace:*",
109+
"@tanstack/start-solid-devtools": "workspace:*",
107110
"@tanstack/start-client-core": "workspace:*",
108111
"@tanstack/start-server-core": "workspace:*",
109112
"@tanstack/start-storage-context": "workspace:*",
@@ -115,4 +118,4 @@
115118
"@tanstack/nitro-v2-vite-plugin": "workspace:*"
116119
}
117120
}
118-
}
121+
}

‎packages/react-start-devtools/eslint.config.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @ts-check
2+
3+
import pluginReact from '@eslint-react/eslint-plugin'
4+
import pluginReactCompiler from 'eslint-plugin-react-compiler'
5+
import pluginReactHooks from 'eslint-plugin-react-hooks'
6+
import rootConfig from '../../eslint.config.js'
7+
8+
export default [
9+
...rootConfig,
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
...pluginReact.configs.recommended,
13+
},
14+
{
15+
plugins: {
16+
'react-hooks': pluginReactHooks,
17+
'react-compiler': pluginReactCompiler,
18+
},
19+
rules: {
20+
'@eslint-react/dom/no-missing-button-type': 'off',
21+
'react-compiler/react-compiler': 'error',
22+
'react-hooks/exhaustive-deps': 'error',
23+
'react-hooks/rules-of-hooks': 'error',
24+
},
25+
},
26+
{
27+
files: ['**/__tests__/**'],
28+
rules: {
29+
// 'react-compiler/react-compiler': 'off',
30+
},
31+
},
32+
]

‎packages/react-start-devtools/package.json‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{
2+
"name": "@tanstack/react-start-devtools",
3+
"version": "0.0.1",
4+
"description": "React adapter for devtools for Start.",
5+
"author": "Tanner Linsley",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/TanStack/start.git",
10+
"directory": "packages/start"
11+
},
12+
"homepage": "https://tanstack.com/start",
13+
"funding": {
14+
"type": "github",
15+
"url": "https://github.com/sponsors/tannerlinsley"
16+
},
17+
"keywords": [],
18+
"type": "module",
19+
"types": "dist/esm/index.d.ts",
20+
"module": "dist/esm/index.js",
21+
"exports": {
22+
".": {
23+
"import": {
24+
"types": "./dist/esm/index.d.ts",
25+
"default": "./dist/esm/index.js"
26+
}
27+
},
28+
"./production": {
29+
"import": {
30+
"types": "./dist/esm/production.d.ts",
31+
"default": "./dist/esm/production.js"
32+
}
33+
},
34+
"./package.json": "./package.json"
35+
},
36+
"sideEffects": false,
37+
"engines": {
38+
"node": ">=18"
39+
},
40+
"files": [
41+
"dist/",
42+
"src"
43+
],
44+
"scripts": {
45+
"clean": "premove ./build ./dist",
46+
"lint:fix": "eslint ./src --fix",
47+
"test:eslint": "eslint ./src",
48+
"test:lib": "vitest",
49+
"test:lib:dev": "pnpm test:lib --watch",
50+
"test:types": "tsc",
51+
"test:build": "publint --strict",
52+
"build": "vite build"
53+
},
54+
"peerDependencies": {
55+
"@types/react": ">=16.8",
56+
"@types/react-dom": ">=16.8",
57+
"react": ">=16.8",
58+
"react-dom": ">=16.8"
59+
},
60+
"dependencies": {
61+
"@tanstack/devtools-utils": "^0.0.3",
62+
"@tanstack/start-devtools": "workspace:*"
63+
},
64+
"devDependencies": {
65+
"@eslint-react/eslint-plugin": "^1.53.1",
66+
"@vitejs/plugin-react": "^5.0.2",
67+
"eslint-plugin-react-compiler": "19.1.0-rc.2",
68+
"eslint-plugin-react-hooks": "^5.2.0"
69+
}
70+
}

‎packages/react-start-devtools/src/ReactStartDevtools.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
import { createReactPanel } from '@tanstack/devtools-utils/react'
3+
import { StartDevtoolsCore } from "@tanstack/start-devtools"
4+
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react';
5+
6+
export interface StartDevtoolsReactInit extends DevtoolsPanelProps { }
7+
8+
const [StartDevtoolsPanel, StartDevtoolsPanelNoOp] = createReactPanel(StartDevtoolsCore)
9+
10+
export { StartDevtoolsPanel, StartDevtoolsPanelNoOp }

‎packages/react-start-devtools/src/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client'
2+
3+
import * as Devtools from './ReactStartDevtools'
4+
import * as plugin from './plugin'
5+
6+
export const StartDevtoolsPanel =
7+
process.env.NODE_ENV !== 'development'
8+
? Devtools.StartDevtoolsPanelNoOp
9+
: Devtools.StartDevtoolsPanel
10+
11+
export const startDevtoolsPlugin =
12+
process.env.NODE_ENV !== 'development'
13+
? plugin.startDevtoolsNoOpPlugin
14+
: plugin.startDevtoolsPlugin
15+
16+
export type { StartDevtoolsReactInit } from './ReactStartDevtools'

‎packages/react-start-devtools/src/plugin.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createReactPlugin } from '@tanstack/devtools-utils/react'
2+
import { StartDevtoolsPanel } from './ReactStartDevtools'
3+
4+
const [startDevtoolsPlugin, startDevtoolsNoOpPlugin] = createReactPlugin("TanStack Start", StartDevtoolsPanel)
5+
6+
export { startDevtoolsPlugin, startDevtoolsNoOpPlugin }

‎packages/react-start-devtools/src/production.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use client'
2+
3+
export { StartDevtoolsPanel } from './ReactStartDevtools'
4+
5+
export type { StartDevtoolsReactInit } from './ReactStartDevtools'
6+
7+
export { startDevtoolsPlugin } from './plugin'

0 commit comments

Comments
 (0)