Skip to content

Commit 0438765

Browse files
autofix-ci[bot]autofix-ci[bot]
authored
ci: apply automated fixes
1 parent 6c331b7 commit 0438765

9 files changed

Lines changed: 233 additions & 77 deletions

File tree

‎examples/react/basic/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@
4141
"last 1 safari version"
4242
]
4343
}
44-
}
44+
}

‎examples/react/basic/src/package-json-panel.tsx‎

Lines changed: 188 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
1-
import { devtoolsEventClient } from "@tanstack/devtools-vite/client"
2-
import { useEffect, useState } from "react"
3-
import type { CSSProperties } from "react"
1+
import { devtoolsEventClient } from '@tanstack/devtools-vite/client'
2+
import { useEffect, useState } from 'react'
3+
import type { CSSProperties } from 'react'
44

55
export const PackageJsonPanel = () => {
66
const [packageJson, setPackageJson] = useState<any>(null)
7-
const [outdatedDeps, setOutdatedDeps] = useState<Record<string, { current: string; wanted: string; latest: string; type?: 'dependencies' | 'devDependencies' }>>({})
7+
const [outdatedDeps, setOutdatedDeps] = useState<
8+
Record<
9+
string,
10+
{
11+
current: string
12+
wanted: string
13+
latest: string
14+
type?: 'dependencies' | 'devDependencies'
15+
}
16+
>
17+
>({})
818

919
useEffect(() => {
10-
devtoolsEventClient.emit("mounted", undefined as any)
11-
const off = devtoolsEventClient.on("ready", (event) => {
20+
devtoolsEventClient.emit('mounted', undefined as any)
21+
const off = devtoolsEventClient.on('ready', (event) => {
1222
setPackageJson(event.payload.packageJson)
1323
setOutdatedDeps(event.payload.outdatedDeps || {})
1424
})
15-
return () => { off?.() }
25+
return () => {
26+
off?.()
27+
}
1628
}, [])
1729

1830
const hasOutdated = Object.keys(outdatedDeps || {}).length > 0
@@ -25,13 +37,17 @@ export const PackageJsonPanel = () => {
2537
if (!m) return null
2638
return { major: +m[1], minor: +m[2], patch: +m[3] }
2739
}
28-
const diffType = (current?: string, latest?: string): 'major' | 'minor' | 'patch' | null => {
40+
const diffType = (
41+
current?: string,
42+
latest?: string,
43+
): 'major' | 'minor' | 'patch' | null => {
2944
const c = parseSemver(current)
3045
const l = parseSemver(latest)
3146
if (!c || !l) return null
3247
if (l.major > c.major) return 'major'
3348
if (l.major === c.major && l.minor > c.minor) return 'minor'
34-
if (l.major === c.major && l.minor === c.minor && l.patch > c.patch) return 'patch'
49+
if (l.major === c.major && l.minor === c.minor && l.patch > c.patch)
50+
return 'patch'
3551
return null
3652
}
3753
const diffColor: Record<'major' | 'minor' | 'patch', string> = {
@@ -41,30 +57,84 @@ export const PackageJsonPanel = () => {
4157
}
4258

4359
const containerStyle: CSSProperties = { padding: 10 }
44-
const metaStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 6, marginBottom: 8 }
45-
const sectionStyle: CSSProperties = { margin: '8px 0', padding: '8px', border: '1px solid #444', borderRadius: 6 }
46-
const tableStyle: CSSProperties = { width: '100%', borderCollapse: 'collapse' }
47-
const thtd: CSSProperties = { borderBottom: '1px solid #333', padding: '4px 6px', textAlign: 'left' }
48-
const badge = (text: string, color: string) => <span style={{ background: color, color: '#fff', borderRadius: 4, padding: '1px 4px', fontSize: 11 }}>{text}</span>
49-
const btn = (label: string, onClick: () => void, variant: 'primary' | 'ghost' = 'primary') => (
50-
<button onClick={onClick} style={{
51-
padding: '2px 6px', borderRadius: 5, border: variant === 'primary' ? '1px solid #6d28d9' : '1px solid transparent', cursor: 'pointer',
52-
background: variant === 'primary' ? '#7c3aed' : 'transparent', color: variant === 'primary' ? '#fff' : '#7c3aed', fontSize: 12
53-
}}>{label}</button>
60+
const metaStyle: CSSProperties = {
61+
display: 'grid',
62+
gridTemplateColumns: 'auto 1fr',
63+
gap: 6,
64+
marginBottom: 8,
65+
}
66+
const sectionStyle: CSSProperties = {
67+
margin: '8px 0',
68+
padding: '8px',
69+
border: '1px solid #444',
70+
borderRadius: 6,
71+
}
72+
const tableStyle: CSSProperties = {
73+
width: '100%',
74+
borderCollapse: 'collapse',
75+
}
76+
const thtd: CSSProperties = {
77+
borderBottom: '1px solid #333',
78+
padding: '4px 6px',
79+
textAlign: 'left',
80+
}
81+
const badge = (text: string, color: string) => (
82+
<span
83+
style={{
84+
background: color,
85+
color: '#fff',
86+
borderRadius: 4,
87+
padding: '1px 4px',
88+
fontSize: 11,
89+
}}
90+
>
91+
{text}
92+
</span>
93+
)
94+
const btn = (
95+
label: string,
96+
onClick: () => void,
97+
variant: 'primary' | 'ghost' = 'primary',
98+
) => (
99+
<button
100+
onClick={onClick}
101+
style={{
102+
padding: '2px 6px',
103+
borderRadius: 5,
104+
border:
105+
variant === 'primary' ? '1px solid #6d28d9' : '1px solid transparent',
106+
cursor: 'pointer',
107+
background: variant === 'primary' ? '#7c3aed' : 'transparent',
108+
color: variant === 'primary' ? '#fff' : '#7c3aed',
109+
fontSize: 12,
110+
}}
111+
>
112+
{label}
113+
</button>
54114
)
55115

56-
const VersionCell = ({ dep, specified }: { dep: string, specified: string }) => {
116+
const VersionCell = ({
117+
dep,
118+
specified,
119+
}: {
120+
dep: string
121+
specified: string
122+
}) => {
57123
const info = outdatedDeps[dep]
58124
const current = info?.current ?? specified
59125
const latest = info?.latest
60126
const dt = info ? diffType(current, latest) : null
61127
return (
62128
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
63129
<span>{current}</span>
64-
{dt && latest ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
65-
<span style={{ opacity: 0.6 }}>→</span>
66-
{badge(`latest ${latest}`, diffColor[dt])}
67-
</span> : null}
130+
{dt && latest ? (
131+
<span
132+
style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
133+
>
134+
<span style={{ opacity: 0.6 }}>→</span>
135+
{badge(`latest ${latest}`, diffColor[dt])}
136+
</span>
137+
) : null}
68138
</div>
69139
)
70140
}
@@ -74,16 +144,37 @@ export const PackageJsonPanel = () => {
74144
if (!info) return null
75145
return (
76146
<div style={{ display: 'flex', gap: 6 }}>
77-
{btn('Wanted', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.wanted } as any))}
78-
{btn('Latest', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.latest } as any), 'ghost')}
147+
{btn('Wanted', () =>
148+
(devtoolsEventClient as any).emit('upgrade-dependency', {
149+
name,
150+
target: info.wanted,
151+
} as any),
152+
)}
153+
{btn(
154+
'Latest',
155+
() =>
156+
(devtoolsEventClient as any).emit('upgrade-dependency', {
157+
name,
158+
target: info.latest,
159+
} as any),
160+
'ghost',
161+
)}
79162
</div>
80163
)
81164
}
82165

83166
const makeLists = (names?: string[]) => {
84-
const entries = Object.entries(outdatedDeps).filter(([n]) => !names || names.includes(n))
85-
const wantedList = entries.map(([name, info]) => ({ name, target: info.wanted }))
86-
const latestList = entries.map(([name, info]) => ({ name, target: info.latest }))
167+
const entries = Object.entries(outdatedDeps).filter(
168+
([n]) => !names || names.includes(n),
169+
)
170+
const wantedList = entries.map(([name, info]) => ({
171+
name,
172+
target: info.wanted,
173+
}))
174+
const latestList = entries.map(([name, info]) => ({
175+
name,
176+
target: info.latest,
177+
}))
87178
return { wantedList, latestList }
88179
}
89180

@@ -92,8 +183,19 @@ export const PackageJsonPanel = () => {
92183
if (wantedList.length === 0 && latestList.length === 0) return null
93184
return (
94185
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
95-
{btn('All → wanted', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: wantedList } as any))}
96-
{btn('All → latest', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: latestList } as any), 'ghost')}
186+
{btn('All → wanted', () =>
187+
(devtoolsEventClient as any).emit('upgrade-dependencies-bulk', {
188+
list: wantedList,
189+
} as any),
190+
)}
191+
{btn(
192+
'All → latest',
193+
() =>
194+
(devtoolsEventClient as any).emit('upgrade-dependencies-bulk', {
195+
list: latestList,
196+
} as any),
197+
'ghost',
198+
)}
97199
</div>
98200
)
99201
}
@@ -103,7 +205,14 @@ export const PackageJsonPanel = () => {
103205
const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
104206
return (
105207
<div style={sectionStyle}>
106-
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
208+
<div
209+
style={{
210+
display: 'flex',
211+
alignItems: 'center',
212+
justifyContent: 'space-between',
213+
gap: 6,
214+
}}
215+
>
107216
<h3 style={{ margin: 0, fontSize: 14 }}>{title}</h3>
108217
{someOutdatedInSection ? <BulkActions names={names} /> : null}
109218
</div>
@@ -123,9 +232,17 @@ export const PackageJsonPanel = () => {
123232
return (
124233
<tr key={dep}>
125234
<td style={thtd}>{dep}</td>
126-
<td style={thtd}><VersionCell dep={dep} specified={version as string} /></td>
127-
<td style={thtd}>{isOutdated ? badge('Outdated', '#e11d48') : badge('OK', '#10b981')}</td>
128-
<td style={thtd}>{isOutdated ? <UpgradeRowActions name={dep} /> : null}</td>
235+
<td style={thtd}>
236+
<VersionCell dep={dep} specified={version as string} />
237+
</td>
238+
<td style={thtd}>
239+
{isOutdated
240+
? badge('Outdated', '#e11d48')
241+
: badge('OK', '#10b981')}
242+
</td>
243+
<td style={thtd}>
244+
{isOutdated ? <UpgradeRowActions name={dep} /> : null}
245+
</td>
129246
</tr>
130247
)
131248
})}
@@ -141,26 +258,52 @@ export const PackageJsonPanel = () => {
141258
{packageJson ? (
142259
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
143260
<div style={sectionStyle}>
144-
<h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Package info</h3>
261+
<h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>
262+
Package info
263+
</h3>
145264
<div style={metaStyle}>
146-
<div><strong>Name</strong></div><div>{packageJson.name}</div>
147-
<div><strong>Version</strong></div><div>v{packageJson.version}</div>
148-
<div><strong>Description</strong></div><div>{packageJson.description}</div>
149-
<div><strong>Author</strong></div><div>{packageJson.author}</div>
150-
<div><strong>License</strong></div><div>{packageJson.license}</div>
151-
<div><strong>Repository</strong></div><div>{packageJson.repository?.url || packageJson.repository}</div>
265+
<div>
266+
<strong>Name</strong>
267+
</div>
268+
<div>{packageJson.name}</div>
269+
<div>
270+
<strong>Version</strong>
271+
</div>
272+
<div>v{packageJson.version}</div>
273+
<div>
274+
<strong>Description</strong>
275+
</div>
276+
<div>{packageJson.description}</div>
277+
<div>
278+
<strong>Author</strong>
279+
</div>
280+
<div>{packageJson.author}</div>
281+
<div>
282+
<strong>License</strong>
283+
</div>
284+
<div>{packageJson.license}</div>
285+
<div>
286+
<strong>Repository</strong>
287+
</div>
288+
<div>{packageJson.repository?.url || packageJson.repository}</div>
152289
</div>
153290
</div>
154291
{renderDeps('Dependencies', packageJson.dependencies)}
155292
{renderDeps('Dev Dependencies', packageJson.devDependencies)}
156293
<div style={sectionStyle}>
157-
<h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Outdated (All)</h3>
158-
{hasOutdated ? <BulkActions /> : <p style={{ margin: 0 }}>All dependencies are up to date.</p>}
294+
<h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>
295+
Outdated (All)
296+
</h3>
297+
{hasOutdated ? (
298+
<BulkActions />
299+
) : (
300+
<p style={{ margin: 0 }}>All dependencies are up to date.</p>
301+
)}
159302
</div>
160303
</div>
161304
) : (
162305
<p style={{ margin: 0 }}>No package.json data available</p>
163306
)}
164307
</div>
165308
)
166-
}
309+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ export default function DevtoolsExample() {
7474
render: <TanStackRouterDevtoolsPanel router={router} />,
7575
},
7676
{
77-
name: "Package.json",
77+
name: 'Package.json',
7878
render: () => <PackageJsonPanel />,
79-
}
79+
},
8080
/* {
8181
name: "The actual app",
8282
render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,

‎packages/devtools-vite/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,4 @@
7373
"@types/babel__traverse": "^7.28.0",
7474
"happy-dom": "^18.0.1"
7575
}
76-
}
76+
}

‎packages/devtools-vite/src/client.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { devtoolsEventClient } from "./event"
1+
export { devtoolsEventClient } from './event'

‎packages/devtools-vite/src/event.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { EventClient } from "@tanstack/devtools-event-client"
1+
import { EventClient } from '@tanstack/devtools-event-client'
22

33
interface EventMap {
4-
"tanstack-devtools-vite:ready": {
4+
'tanstack-devtools-vite:ready': {
55
packageJson: {
66
name?: string
77
version?: string
@@ -10,19 +10,28 @@ interface EventMap {
1010
peerDependencies?: Record<string, string>
1111
[key: string]: any
1212
} | null
13-
outdatedDeps: Record<string, { current: string; wanted: string; latest: string; dependent: string; location: string }> | null
13+
outdatedDeps: Record<
14+
string,
15+
{
16+
current: string
17+
wanted: string
18+
latest: string
19+
dependent: string
20+
location: string
21+
}
22+
> | null
1423
}
15-
"tanstack-devtools-vite:mounted": void
24+
'tanstack-devtools-vite:mounted': void
1625
}
1726

1827
export class DevtoolsEventClient extends EventClient<EventMap> {
1928
constructor() {
2029
super({
21-
pluginId: "tanstack-devtools-vite",
30+
pluginId: 'tanstack-devtools-vite',
2231
})
2332
}
2433
}
2534

2635
const devtoolsEventClient = new DevtoolsEventClient()
2736

28-
export { devtoolsEventClient }
37+
export { devtoolsEventClient }

0 commit comments

Comments
 (0)