Skip to content

Commit 5372697

Browse files
AlemTuzlakautofix-ci[bot]
AlemTuzlak
and
autofix-ci[bot]
authored
Feat/add json tree to UI (#29)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 0781b37 commit 5372697

File tree

6 files changed

+169
-2
lines changed

6 files changed

+169
-2
lines changed

‎.changeset/thin-cougars-fly.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@tanstack/react-devtools': minor
3+
'@tanstack/solid-devtools': minor
4+
'@tanstack/devtools-ui': minor
5+
---
6+
7+
Added json tree to devtools-ui and adjusted the width for the plugin renderers

‎packages/devtools-ui/src/components/tree.tsx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { For } from 'solid-js'
2+
import { useStyles } from '../styles/use-styles'
3+
4+
export function JsonTree(props: { value: any }) {
5+
return <JsonValue isRoot value={props.value} />
6+
}
7+
8+
function JsonValue(props: {
9+
value: any
10+
keyName?: string
11+
isRoot?: boolean
12+
isLastKey?: boolean
13+
}) {
14+
const { value, keyName, isRoot = false, isLastKey } = props
15+
const styles = useStyles()
16+
17+
return (
18+
<span class={styles().tree.valueContainer(isRoot)}>
19+
{(() => {
20+
if (typeof value === 'string') {
21+
return (
22+
<span>
23+
{keyName && (
24+
<span class={styles().tree.valueKey}>
25+
&quot;{keyName}&quot;:{' '}
26+
</span>
27+
)}
28+
<span class={styles().tree.valueString}>&quot;{value}&quot;</span>
29+
</span>
30+
)
31+
}
32+
if (typeof value === 'number') {
33+
return (
34+
<span>
35+
{keyName && (
36+
<span class={styles().tree.valueKey}>
37+
&quot;{keyName}&quot;:{' '}
38+
</span>
39+
)}
40+
<span class={styles().tree.valueNumber}>{value}</span>
41+
</span>
42+
)
43+
}
44+
if (typeof value === 'boolean') {
45+
return (
46+
<span>
47+
{keyName && (
48+
<span class={styles().tree.valueKey}>
49+
&quot;{keyName}&quot;:{' '}
50+
</span>
51+
)}
52+
<span class={styles().tree.valueBoolean}>{String(value)}</span>
53+
</span>
54+
)
55+
}
56+
if (value === null) {
57+
return (
58+
<span>
59+
{keyName && (
60+
<span class={styles().tree.valueKey}>
61+
&quot;{keyName}&quot;:{' '}
62+
</span>
63+
)}
64+
<span class={styles().tree.valueNull}>null</span>
65+
</span>
66+
)
67+
}
68+
if (value === undefined) {
69+
return (
70+
<span>
71+
{keyName && (
72+
<span class={styles().tree.valueKey}>
73+
&quot;{keyName}&quot;:{' '}
74+
</span>
75+
)}
76+
<span class={styles().tree.valueNull}>undefined</span>
77+
</span>
78+
)
79+
}
80+
if (Array.isArray(value)) {
81+
return (
82+
<span>
83+
{keyName && (
84+
<span class={styles().tree.valueKey}>
85+
&quot;{keyName}&quot;:{' '}
86+
</span>
87+
)}
88+
<span class={styles().tree.valueBraces}>[</span>
89+
<For each={value}>
90+
{(item, i) => {
91+
const isLastKey = i() === value.length - 1
92+
return (
93+
<>
94+
<JsonValue value={item} isLastKey={isLastKey} />
95+
</>
96+
)
97+
}}
98+
</For>
99+
<span class={styles().tree.valueBraces}>]</span>
100+
</span>
101+
)
102+
}
103+
if (typeof value === 'object') {
104+
const keys = Object.keys(value)
105+
const lastKeyName = keys[keys.length - 1]
106+
return (
107+
<span>
108+
{keyName && (
109+
<span class={styles().tree.valueKey}>
110+
&quot;{keyName}&quot;:{' '}
111+
</span>
112+
)}
113+
<span class={styles().tree.valueBraces}>{'{'}</span>
114+
<For each={keys}>
115+
{(k) => (
116+
<>
117+
<JsonValue
118+
value={value[k]}
119+
keyName={k}
120+
isLastKey={lastKeyName === k}
121+
/>
122+
</>
123+
)}
124+
</For>
125+
<span class={styles().tree.valueBraces}>{'}'}</span>
126+
</span>
127+
)
128+
}
129+
return <span />
130+
})()}
131+
{isLastKey || isRoot ? '' : <span>,</span>}
132+
</span>
133+
)
134+
}

‎packages/devtools-ui/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export { Checkbox } from './components/checkbox'
22
export { Input } from './components/input'
33
export { Select } from './components/select'
44
export { TanStackLogo } from './components/logo'
5+
export { JsonTree } from './components/tree'

‎packages/devtools-ui/src/styles/use-styles.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,31 @@ const stylesFactory = () => {
186186
font-size: 0.8rem;
187187
line-height: 1.3;
188188
`,
189+
tree: {
190+
valueString: css`
191+
color: ${colors.green[400]};
192+
`,
193+
valueNumber: css`
194+
color: ${colors.yellow[400]};
195+
`,
196+
valueBoolean: css`
197+
color: ${colors.pink[400]};
198+
`,
199+
valueNull: css`
200+
color: ${colors.gray[400]};
201+
font-style: italic;
202+
`,
203+
valueKey: css`
204+
color: ${colors.blue[300]};
205+
`,
206+
valueBraces: css`
207+
color: ${colors.gray[500]};
208+
`,
209+
valueContainer: (isRoot: boolean) => css`
210+
display: block;
211+
margin-left: ${isRoot ? '0' : '1rem'};
212+
`,
213+
},
189214
}
190215
}
191216

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const TanstackDevtools = ({
153153

154154
return (
155155
<>
156-
<div ref={devToolRef} />
156+
<div style={{ height: '100%' }} ref={devToolRef} />
157157
{pluginContainer && PluginComponent
158158
? createPortal(<>{PluginComponent}</>, pluginContainer)
159159
: null}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,5 +126,5 @@ export const TanstackDevtools = ({
126126
})
127127
}
128128
})
129-
return <div ref={devToolRef} />
129+
return <div style={{ height: '100%' }} ref={devToolRef} />
130130
}

0 commit comments

Comments
 (0)