Skip to content

Commit 860f37b

Browse files
lxsmnsyclxsmnsyc
committed
final output
1 parent 2b682ab commit 860f37b

File tree

16 files changed

+226
-174
lines changed

16 files changed

+226
-174
lines changed

‎packages/start/src/shared/server-function-inspector/FormDataViewer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createResource, For, type JSX, Show, Suspense } from 'solid-js';
2-
import { PropertySeparator } from '../ui/Properties.tsx';
32
import { Section } from '../ui/Section';
43
import { BlobViewer } from './BlobViewer.tsx';
5-
import { SerovalValue } from './SerovalValue.tsx';
4+
import { SerovalValue, PropertySeparator } from './SerovalValue.tsx';
65

76
interface FormDataViewerInnerProps {
87
source: FormData;
@@ -11,10 +10,10 @@ interface FormDataViewerInnerProps {
1110
function FormDataViewerInner(props: FormDataViewerInnerProps): JSX.Element {
1211
return (
1312
<Section title="FormData" options={{ size: 'sm' }}>
14-
<div data-start-form-data-viewer data-start-seroval-properties>
13+
<div data-start-form-data-viewer data-start-properties>
1514
<For each={Array.from(props.source.entries())}>
1615
{([key, value]) => (
17-
<div data-start-seroval-property>
16+
<div data-start-property>
1817
<SerovalValue value={`"${key}"`} />
1918
<PropertySeparator />
2019
{typeof value === 'string'

‎packages/start/src/shared/server-function-inspector/HeadersViewer.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
line-height: 1rem;
44
}
55

6-
[data-start-header-key] {
7-
white-space: nowrap;
8-
}
9-
10-
[data-start-header-value] {
11-
white-space: nowrap;
6+
[data-start-headers-viewer] > [data-start-property] > *:first-child {
7+
text-transform: capitalize;
128
}

‎packages/start/src/shared/server-function-inspector/HeadersViewer.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1-
import { Properties } from "../ui/Properties.tsx";
2-
import { Text } from "../ui/Text.tsx";
1+
import { For } from "solid-js";
2+
import { PropertySeparator, SerovalValue } from "./SerovalValue.tsx";
33

44
import './HeadersViewer.css';
5+
import { Text } from "../ui/Text.tsx";
56

67
interface HeadersViewerProps {
78
headers: Headers;
89
}
910

1011
export function HeadersViewer(props: HeadersViewerProps) {
1112
return (
12-
<div data-start-headers-viewer>
13-
<Properties
14-
entries={Array.from(props.headers.entries())}
15-
renderKey={(key) => <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>{key}:</Text>}
16-
renderValue = {(value) => <Text options={{ size: 'xs', wrap: 'nowrap' }}>{value}</Text>}
17-
/>
13+
<div data-start-headers-viewer data-start-properties>
14+
<For each={Array.from(props.headers.entries())}>
15+
{([key, value]) => (
16+
<div data-start-property>
17+
<Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>{key}</Text>
18+
<PropertySeparator />
19+
<SerovalValue value={value} />
20+
</div>
21+
)}
22+
</For>
1823
</div >
1924
);
20-
}
25+
}

‎packages/start/src/shared/server-function-inspector/SerovalValue.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@ export function SerovalValue(props: SerovalValueProps) {
1212
</Text>
1313
);
1414
}
15+
16+
export function PropertySeparator() {
17+
return <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>:</Text>;
18+
}

‎packages/start/src/shared/server-function-inspector/SerovalViewer.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,3 @@
6969
height: 1rem;
7070
}
7171

72-
[data-start-seroval-properties] {
73-
display: flex;
74-
flex-direction: column;
75-
gap: 0.25rem;
76-
}
77-
78-
[data-start-seroval-property] {
79-
display: flex;
80-
flex-direction: row;
81-
align-items: center;
82-
flex-wrap: nowrap;
83-
}

‎packages/start/src/shared/server-function-inspector/SerovalViewer.tsx‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ import {
1111
import { SerovalChunkReader } from "../../server/serialization.ts";
1212
import { Badge } from "../ui/Badge.tsx";
1313
import { Cascade, CascadeOption } from "../ui/Cascade.tsx";
14-
import { PropertySeparator } from "../ui/Properties.tsx";
1514
import { Section } from "../ui/Section.tsx";
1615
import { HexViewer } from "./HexViewer.tsx";
17-
import { SerovalValue } from "./SerovalValue.tsx";
16+
import { SerovalValue, PropertySeparator } from "./SerovalValue.tsx";
1817

1918
import "./SerovalViewer.css";
2019

@@ -483,21 +482,21 @@ function renderSerovalNode(
483482
return (
484483
<>
485484
<Section title="Information" options={{ size: "xs" }}>
486-
<div data-start-seroval-property>
485+
<div data-start-property>
487486
<SerovalValue value="size" />
488487
<PropertySeparator />
489488
<SerovalValue value={`${node.a.length}`} />
490489
</div>
491490
</Section>
492491
<Section title="Items" options={{ size: "xs" }}>
493492
<Cascade<number | undefined>
494-
data-start-seroval-properties
493+
data-start-properties
495494
defaultValue={undefined}
496495
onChange={onSelect}
497496
>
498497
<For each={node.a.map((node, index) => [index, node] as const)}>
499498
{([key, value]) => (
500-
<div data-start-seroval-property>
499+
<div data-start-property>
501500
<SerovalValue value={key} />
502501
<PropertySeparator />
503502
{renderSerovalNode(ctx, value, onSelect, true)}
@@ -513,21 +512,21 @@ function renderSerovalNode(
513512
return (
514513
<>
515514
<Section title="Information" options={{ size: "xs" }}>
516-
<div data-start-seroval-property>
515+
<div data-start-property>
517516
<SerovalValue value="size" />
518517
<PropertySeparator />
519518
<SerovalValue value={`${node.e.k.length}`} />
520519
</div>
521520
</Section>
522521
<Section title="Items" options={{ size: "xs" }}>
523522
<Cascade<number | undefined>
524-
data-start-seroval-properties
523+
data-start-properties
525524
defaultValue={undefined}
526525
onChange={onSelect}
527526
>
528-
<For each={zip(node.e.k, node.e.v)}>
527+
<For each={zip(node.e.k, node.e.v)} fallback={<SerovalValue value="none" />}>
529528
{([key, value]) => (
530-
<div data-start-seroval-property>
529+
<div data-start-property>
531530
{renderSerovalNode(ctx, key, onSelect, true)}
532531
<PropertySeparator />
533532
{renderSerovalNode(ctx, value, onSelect, true)}
@@ -543,26 +542,26 @@ function renderSerovalNode(
543542
return (
544543
<>
545544
<Section title="Information" options={{ size: "xs" }}>
546-
<div data-start-seroval-property>
545+
<div data-start-property>
547546
<SerovalValue value="length" />
548547
<PropertySeparator />
549548
<SerovalValue value={`${node.a.length}`} />
550549
</div>
551-
<div data-start-seroval-property>
550+
<div data-start-property>
552551
<SerovalValue value="state" />
553552
<PropertySeparator />
554553
<Badge type="info">{getObjectFlag(node.o)}</Badge>
555554
</div>
556555
</Section>
557556
<Section title="Items" options={{ size: "xs" }}>
558557
<Cascade<number | undefined>
559-
data-start-seroval-properties
558+
data-start-properties
560559
defaultValue={undefined}
561560
onChange={onSelect}
562561
>
563-
<For each={node.a.map((node, index) => [index, node] as const)}>
562+
<For each={node.a.map((node, index) => [index, node] as const)} fallback={<SerovalValue value="none" />}>
564563
{([key, value]) => (
565-
<div data-start-seroval-property>
564+
<div data-start-property>
566565
<SerovalValue value={key} />
567566
<PropertySeparator />
568567
{value === 0 ? (
@@ -584,26 +583,26 @@ function renderSerovalNode(
584583
return (
585584
<>
586585
<Section title="Information" options={{ size: "xs" }}>
587-
<div data-start-seroval-property>
586+
<div data-start-property>
588587
<SerovalValue value="size" />
589588
<PropertySeparator />
590589
<SerovalValue value={`${node.p.k.length}`} />
591590
</div>
592-
<div data-start-seroval-property>
591+
<div data-start-property>
593592
<SerovalValue value="state" />
594593
<PropertySeparator />
595594
<Badge type="info">{getObjectFlag(node.o)}</Badge>
596595
</div>
597596
</Section>
598597
<Section title="Properties" options={{ size: "xs" }}>
599598
<Cascade<number | undefined>
600-
data-start-seroval-properties
599+
data-start-properties
601600
defaultValue={undefined}
602601
onChange={onSelect}
603602
>
604-
<For each={zip(node.p.k, node.p.v)}>
603+
<For each={zip(node.p.k, node.p.v)} fallback={<SerovalValue value="none" />}>
605604
{([key, value]) => (
606-
<div data-start-seroval-property>
605+
<div data-start-property>
607606
{typeof key === "string" ? (
608607
<SerovalValue value={`"${key}"`} />
609608
) : (
@@ -622,7 +621,7 @@ function renderSerovalNode(
622621
case 12:
623622
return (
624623
<Cascade<number | undefined>
625-
data-start-seroval-properties
624+
data-start-properties
626625
defaultValue={undefined}
627626
onChange={onSelect}
628627
>
@@ -636,7 +635,7 @@ function renderSerovalNode(
636635
return (
637636
<>
638637
<Section title="Information" options={{ size: "xs" }}>
639-
<div data-start-seroval-property>
638+
<div data-start-property>
640639
<SerovalValue value="message" />
641640
<PropertySeparator />
642641
<SerovalValue value={`"${node.m}"`} />
@@ -646,13 +645,13 @@ function renderSerovalNode(
646645
{(current) => (
647646
<Section title="Properties" options={{ size: "xs" }}>
648647
<Cascade<number | undefined>
649-
data-start-seroval-properties
648+
data-start-properties
650649
defaultValue={undefined}
651650
onChange={onSelect}
652651
>
653-
<For each={zip(current().k, current().v)}>
652+
<For each={zip(current().k, current().v)} fallback={<SerovalValue value="none" />}>
654653
{([key, value]) => (
655-
<div data-start-seroval-property>
654+
<div data-start-property>
656655
{typeof key === "string" ? (
657656
<SerovalValue value={`"${key}"`} />
658657
) : (
@@ -690,20 +689,20 @@ function renderSerovalNode(
690689
return (
691690
<>
692691
<Section title="Information" options={{ size: "xs" }}>
693-
<div data-start-seroval-property>
692+
<div data-start-property>
694693
<SerovalValue value="byteLength" />
695694
<PropertySeparator />
696695
<SerovalValue value={node.l} />
697696
</div>
698-
<div data-start-seroval-property>
697+
<div data-start-property>
699698
<SerovalValue value="byteOffset" />
700699
<PropertySeparator />
701700
<SerovalValue value={node.b} />
702701
</div>
703702
</Section>
704703
<Section title="Buffer" options={{ size: "xs" }}>
705704
<Cascade<number | undefined>
706-
data-start-seroval-properties
705+
data-start-properties
707706
defaultValue={undefined}
708707
onChange={onSelect}
709708
>
@@ -716,7 +715,7 @@ function renderSerovalNode(
716715
case 21:
717716
return (
718717
<Cascade<number | undefined>
719-
data-start-seroval-properties
718+
data-start-properties
720719
defaultValue={undefined}
721720
onChange={onSelect}
722721
>
@@ -732,16 +731,16 @@ function renderSerovalNode(
732731
const status = result.t === 23 ? "success" : ("failure" as const);
733732
return (
734733
<Cascade<number | undefined>
735-
data-start-seroval-properties
734+
data-start-properties
736735
defaultValue={undefined}
737736
onChange={onSelect}
738737
>
739-
<div data-start-seroval-property>
738+
<div data-start-property>
740739
<SerovalValue value="status" />
741740
<PropertySeparator />
742741
<Badge type={status}>{status}</Badge>
743742
</div>
744-
<span data-start-seroval-property>
743+
<span data-start-property>
745744
<SerovalValue value="value" />
746745
<PropertySeparator />
747746
{renderSerovalNode(ctx, result.a[1], onSelect, true)}
@@ -758,21 +757,21 @@ function renderSerovalNode(
758757
return (
759758
<>
760759
<Section title="Information" options={{ size: "xs" }}>
761-
<div data-start-seroval-property>
760+
<div data-start-property>
762761
<SerovalValue value="plugin" />
763762
<PropertySeparator />
764763
<SerovalValue value={node.c} />
765764
</div>
766765
</Section>
767766
<Section title="Properties" options={{ size: "xs" }}>
768767
<Cascade<number | undefined>
769-
data-start-seroval-properties
768+
data-start-properties
770769
defaultValue={undefined}
771770
onChange={onSelect}
772771
>
773-
<For each={Object.entries(node.s)}>
772+
<For each={Object.entries(node.s)} fallback={<SerovalValue value="none" />}>
774773
{([key, value]) => (
775-
<div data-start-seroval-property>
774+
<div data-start-property>
776775
<SerovalValue value={key} />
777776
<PropertySeparator />
778777
{renderSerovalNode(ctx, value, onSelect, true)}
@@ -803,13 +802,13 @@ function renderSerovalNode(
803802
const result = ctx.getStream(node.i) || [];
804803
return (
805804
<Cascade<number | undefined>
806-
data-start-seroval-properties
805+
data-start-properties
807806
defaultValue={undefined}
808807
onChange={onSelect}
809808
>
810-
<For each={result}>
809+
<For each={result} fallback={<SerovalValue value="none" />}>
811810
{(current) => (
812-
<div data-start-seroval-property>
811+
<div data-start-property>
813812
<SerovalValue value={getStreamKeyword(current.t)} />
814813
<PropertySeparator />
815814
{renderSerovalNode(ctx, current.f, onSelect, true)}
@@ -824,13 +823,13 @@ function renderSerovalNode(
824823
case 35:
825824
return (
826825
<Cascade<number | undefined>
827-
data-start-seroval-properties
826+
data-start-properties
828827
defaultValue={undefined}
829828
onChange={onSelect}
830829
>
831-
<For each={node.a}>
830+
<For each={node.a} fallback={<SerovalValue value="none" />}>
832831
{(current, index) => (
833-
<div data-start-seroval-property>
832+
<div data-start-property>
834833
<SerovalValue value={index() === node.l ? 'return' : index() === node.s ? 'throw' : 'next'} />
835834
<PropertySeparator />
836835
{renderSerovalNode(ctx, current, onSelect, true)}
@@ -862,10 +861,10 @@ function SerovalNodeRenderer(props: SerovalNodeRendererProps): JSX.Element {
862861
<>
863862
<div data-start-seroval-node>
864863
<div data-start-seroval-node-header>
864+
<Badge type="info">{getNodeType(props.node)}</Badge>
865865
{props.node.i != null && (
866866
<Badge type="info">{`id: ${props.node.i}`}</Badge>
867867
)}
868-
<Badge type="info">{getNodeType(props.node)}</Badge>
869868
</div>
870869
<div data-start-seroval-node-content>
871870
{renderSerovalNode(props, props.node, onSelect)}

0 commit comments

Comments
 (0)