Create HexViewer.tsx

Author: lxsmnsyc

packages/start/src/shared/server-function-inspector/HexViewer.css

@@ -0,0 +1,34 @@
+[data-start-hex-viewer] {
+  display: flex;
+  border: 1px oklch(70.7% 0.165 254.624) solid;
+  overflow: auto;
+}
+
+[data-start-hex-viewer-bytes] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+[data-start-hex-viewer-text] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-left: 1px oklch(70.7% 0.165 254.624) solid;
+}
+
+[data-start-hex-row] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+[data-start-hex-text] {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}

packages/start/src/shared/server-function-inspector/HexViewer.tsx

@@ -0,0 +1,111 @@
+import { createMemo, createResource, For, type JSX, Show, Suspense } from "solid-js";
+import { Text } from "../ui/Text.tsx";
+
+import './HexViewer.css';
+
+
+function toHex(num: number, digits = 2): string {
+  return num.toString(16).padStart(digits, '0').toUpperCase();
+}
+
+function HexChunk(props: HexViewerInnerProps) {
+
+  const content = createMemo(() => {
+    const byte1 = props.bytes[0] || 0;
+    const byte2 = props.bytes[1] || 0;
+    const byte3 = props.bytes[2] || 0;
+    const byte4 = props.bytes[3] || 0;
+
+    return `${toHex(byte1)} ${toHex(byte2)} ${toHex(byte3)} ${toHex(byte4)}`
+  });
+  return (
+    <Text data-start-hex-chunk options={{ size: 'xs', weight: 'bold', wrap: 'nowrap' }}>
+      {content()}
+    </Text>
+  );
+}
+
+function HexRow(props: HexViewerInnerProps) {
+  const chunk1 = createMemo(() => props.bytes.subarray(0, 4));
+  const chunk2 = createMemo(() => props.bytes.subarray(4, 8));
+  const chunk3 = createMemo(() => props.bytes.subarray(8, 12));
+  const chunk4 = createMemo(() => props.bytes.subarray(12, 16));
+
+  return (
+    <div data-start-hex-row>
+      <HexChunk bytes={chunk1()} />
+      <HexChunk bytes={chunk2()} />
+      <HexChunk bytes={chunk3()} />
+      <HexChunk bytes={chunk4()} />
+    </div>
+  );
+}
+
+function replaceString(string: string): string {
+  const result = string.codePointAt(0);
+  if (result == null) {
+    return string;
+  }
+  return String.fromCodePoint(result + 0x2400);
+}
+
+function HexText(props: HexViewerInnerProps) {
+  const text = createMemo(() => {
+    const decoder = new TextDecoder();
+    const result = decoder.decode(props.bytes).replaceAll(/[\x00-\x1F]/g, replaceString);
+    return result;
+  });
+
+  return (
+    <div data-start-hex-text>
+      <Text options={{ size: 'xs', weight: 'bold', wrap: 'nowrap' }}>
+        {text()}
+      </Text>
+    </div>
+  );
+}
+
+interface HexViewerInnerProps {
+  bytes: Uint8Array;
+}
+
+export function HexViewerInner(props: HexViewerInnerProps): JSX.Element {
+  const rows = createMemo(() => {
+    const arrays: Uint8Array[] = [];
+    for (let i = 0, len = props.bytes.length; i < len; i += 16) {
+      arrays.push(props.bytes.subarray(i, i + 16));
+    }
+    return arrays;
+  });
+
+  return (
+    <div data-start-hex-viewer>
+      <div data-start-hex-viewer-bytes>
+        <For each={rows()}>
+          {(current) => <HexRow bytes={current} />}
+        </For>
+      </div>
+      <div data-start-hex-viewer-text>
+        <For each={rows()}>
+          {(current) => <HexText bytes={current} />}
+        </For>
+      </div>
+    </div>
+  );
+}
+
+export interface HexViewerProps {
+  bytes: Uint8Array | Promise<Uint8Array>;
+}
+
+export function HexViewer(props: HexViewerProps): JSX.Element {
+  const [data] = createResource(() => props.bytes);
+
+  return (
+    <Suspense>
+      <Show when={data()}>
+        {(current) => <HexViewerInner bytes={current()} />}
+      </Show>
+    </Suspense>
+  );
+}

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

@@ -6,6 +6,7 @@ import { Cascade, CascadeOption } from "../ui/Cascade.tsx";
 import { Section } from "../ui/Section.tsx";
 import { Text } from "../ui/Text.tsx";
 import './SerovalViewer.css';
+import { HexViewer } from "./HexViewer.tsx";
 
 function LinkIcon(
   props: JSX.IntrinsicElements["svg"] & { title: string },
@@ -545,24 +546,22 @@ function renderSerovalNode(
           </Show >
         </>
       );
-    // TypedArray = 15,
-    case 15:
-    // BigIntTypedArray = 16,
-    case 16:
-      return (
-        <Cascade<number | undefined> data-start-seroval-properties defaultValue={undefined} onChange={onSelect}>
-          {renderSerovalNode(ctx, node.f, onSelect, true)}
-        </Cascade>
-      );
     // WKSymbol = 17,
     case 17:
       return <SerovalValue value={getSymbolValue(node.s)} />
     // Reference = 18,
     case 18:
       break;
     // ArrayBuffer = 19,
-    case 19:
-      return <SerovalValue value={node.s} />;
+    case 19: {
+      const data = atob(node.s);
+      const result = new TextEncoder().encode(data);
+      return <HexViewer bytes={result} />;
+    }
+    // TypedArray = 15,
+    case 15:
+    // BigIntTypedArray = 16,
+    case 16:
     // DataView = 20,
     case 20:
       return (

packages/start/src/shared/server-function-inspector/index.tsx

@@ -8,20 +8,22 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 import { Portal } from "solid-js/web";
+import { BODY_FORMAT_KEY, BodyFormat } from "../../server/server-functions-shared.ts";
 import { Badge } from "../ui/Badge.tsx";
 import Button from "../ui/Button.tsx";
 import { Dialog, DialogOverlay, DialogPanel } from "../ui/Dialog.tsx";
+import { Section } from "../ui/Section.tsx";
 import { Select, SelectOption } from "../ui/Select.tsx";
 import { Tab, TabGroup, TabList, TabPanel } from "../ui/Tabs.tsx";
 import { HeadersViewer } from "./HeadersViewer.tsx";
+import { HexViewer } from "./HexViewer.tsx";
 import { SerovalViewer } from "./SerovalViewer.tsx";
 import {
   captureServerFunctionCall,
   type ServerFunctionRequest,
   type ServerFunctionResponse,
 } from "./server-function-tracker.ts";
 import "./styles.css";
-import { Section } from "../ui/Section.tsx";
 
 interface ContentViewerProps {
   source: ServerFunctionRequest | ServerFunctionResponse;
@@ -35,8 +37,29 @@ function ContentViewer(props: ContentViewerProps): JSX.Element {
       </Section>
       <Section title="Body">
         {(() => {
-          if (props.source.source.headers.has('x-serialized')) {
-            return <SerovalViewer stream={props.source.source.clone()} />
+          const startType = props.source.source.headers.get(BODY_FORMAT_KEY);
+          const contentType = props.source.source.headers.get('Content-Type');
+          switch (true) {
+            case startType === "true":
+            case startType === BodyFormat.Seroval:
+              return <SerovalViewer stream={props.source.source.clone()} />;
+            case startType === BodyFormat.String:
+              return undefined;
+            case startType === BodyFormat.File: {
+              return undefined;
+            }
+            case startType === BodyFormat.FormData:
+            case contentType?.startsWith("multipart/form-data"):
+              return undefined;
+            case startType === BodyFormat.URLSearchParams:
+            case contentType?.startsWith("application/x-www-form-urlencoded"):
+              return undefined;
+            case startType === BodyFormat.Blob:
+              return undefined;
+            case startType === BodyFormat.ArrayBuffer:
+              return undefined;
+            case startType === BodyFormat.Uint8Array:
+              return <HexViewer bytes={props.source.source.clone().bytes()} />;
           }
         })()}
       </Section>