Skip to content

Commit a747ef4

Browse files
AlemTuzlakAlemTuzlak
committed
chore: fix commas and improve code
1 parent 4121baf commit a747ef4

1 file changed

Lines changed: 70 additions & 65 deletions

File tree

  • packages/devtools-ui/src/components

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

Lines changed: 70 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,80 @@
11
import { For } from "solid-js";
22
import { useStyles } from "../styles/use-styles";
33

4-
export function JsonTree(props: { value: any }){
4+
export function JsonTree(props: { value: any }) {
55
return <JsonValue isRoot value={props.value} />
66
}
77

8-
export function JsonValue(props: { value: any; keyName?: string, isRoot?: boolean }) {
9-
const { value, keyName, isRoot = false } = props;
8+
export function JsonValue(props: { value: any; keyName?: string, isRoot?: boolean, isLastKey?: boolean }) {
9+
const { value, keyName, isRoot = false, isLastKey } = props;
1010
const styles = useStyles();
1111

12-
if (typeof value === 'string') {
13-
return <span class={styles().tree.valueContainer(isRoot)}>
14-
<span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
15-
<span class={styles().tree.valueString}>&quot;{value}&quot;</span></span>
16-
<span>,</span>
17-
</span>;
18-
}
19-
if (typeof value === 'number') {
20-
return <span class={styles().tree.valueContainer(isRoot)}>
21-
<span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
22-
<span class={styles().tree.valueNumber}>{value}</span></span>
23-
<span>,</span>
24-
</span>;
25-
}
26-
if (typeof value === 'boolean') {
27-
return <span class={styles().tree.valueContainer(isRoot)}>
28-
<span>
29-
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
30-
<span class={styles().tree.valueBoolean}>{String(value)}</span>
31-
</span>
32-
<span>,</span>
33-
</span>;
34-
}
35-
if (value === null) {
36-
return <span class={styles().tree.valueContainer(isRoot)}>
37-
<span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
38-
<span class={styles().tree.valueNull}>null</span></span>
39-
<span>,</span>
40-
</span>;
41-
}
42-
if (value === undefined) {
43-
return <span class={styles().tree.valueContainer(isRoot)}>
44-
<span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
45-
<span class={styles().tree.valueNull}>undefined</span></span>
46-
<span>,</span>
47-
</span>;
48-
}
49-
if (Array.isArray(value)) {
50-
return <span class={styles().tree.valueContainer(isRoot)}>
51-
<span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
52-
<span class={styles().tree.valueBraces}>[</span>
53-
<For each={value}>{(item) => <>
54-
<JsonValue value={item} />
55-
</>}
56-
</For>
57-
<span class={styles().tree.valueBraces}>]</span></span>
58-
<span>,</span>
59-
</span>;
60-
}
61-
if (typeof value === 'object') {
62-
const keys = Object.keys(value);
63-
return <span class={styles().tree.valueContainer(isRoot)}>
64-
<span> {keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
65-
<span class={styles().tree.valueBraces}>{'{'}</span>
66-
<For each={keys}>{(k,) => <>
67-
<JsonValue value={value[k]} keyName={k} />
68-
</>}
69-
</For>
70-
<span class={styles().tree.valueBraces}>{'}'}</span></span>
12+
return <span class={styles().tree.valueContainer(isRoot)}>
13+
{(() => {
14+
if (typeof value === 'string') {
15+
return <span>
16+
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
17+
<span class={styles().tree.valueString}>&quot;{value}&quot;</span>
18+
</span>
19+
20+
}
21+
if (typeof value === 'number') {
22+
return <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
23+
<span class={styles().tree.valueNumber}>{value}</span>
24+
</span>
25+
26+
}
27+
if (typeof value === 'boolean') {
28+
return <span>
29+
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
30+
<span class={styles().tree.valueBoolean}>{String(value)}</span>
31+
</span>
32+
33+
}
34+
if (value === null) {
35+
return <span>
36+
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
37+
<span class={styles().tree.valueNull}>null</span>
38+
</span>
39+
40+
}
41+
if (value === undefined) {
42+
return <span>
43+
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
44+
<span class={styles().tree.valueNull}>undefined</span>
45+
</span>;
46+
}
47+
if (Array.isArray(value)) {
48+
49+
return <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
50+
<span class={styles().tree.valueBraces}>[</span>
51+
<For each={value}>{(item, i) => {
52+
const isLastKey = i() === value.length - 1;
53+
return <>
54+
<JsonValue value={item} isLastKey={isLastKey} />
55+
</>
56+
}}
57+
</For>
58+
<span class={styles().tree.valueBraces}>]</span>
59+
</span>
60+
}
61+
if (typeof value === 'object') {
62+
const keys = Object.keys(value);
63+
const lastKeyName = keys[keys.length - 1];
64+
return <span>
65+
{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
66+
<span class={styles().tree.valueBraces}>{'{'}</span>
67+
<For each={keys}>{(k,) => <>
68+
<JsonValue value={value[k]} keyName={k} isLastKey={lastKeyName === k} />
69+
</>}
70+
</For>
71+
<span class={styles().tree.valueBraces}>{'}'}</span>
72+
</span>
73+
74+
}
75+
return <span />;
76+
})()}
77+
{isLastKey || isRoot ? '' : <span>,</span>}
78+
</span>
7179

72-
</span>;
73-
}
74-
return <span />;
7580
}

0 commit comments

Comments
 (0)