@solidjs/start 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/shared/dev-toolbar/functions/HexViewer.jsx

@@ -0,0 +1,78 @@
+import { createMemo, createResource, For, Show, Suspense } from "solid-js";
+import { Text } from "../../ui/Text.jsx";
+import './HexViewer.css';
+function toHex(num, digits = 2) {
+    return num.toString(16).padStart(digits, '0').toUpperCase();
+}
+function HexChunk(props) {
+    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) {
+    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) {
+    const result = string.codePointAt(0);
+    if (result == null) {
+        return string;
+    }
+    return String.fromCodePoint(result + 0x2400);
+}
+function HexText(props) {
+    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>);
+}
+export function HexViewerInner(props) {
+    const rows = createMemo(() => {
+        const arrays = [];
+        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 function HexViewer(props) {
+    const [data] = createResource(() => props.bytes);
+    return (<Suspense>
+      <Show when={data()}>
+        {(current) => <HexViewerInner bytes={current()}/>}
+      </Show>
+    </Suspense>);
+}

package/dist/shared/dev-toolbar/functions/SerovalValue.css

@@ -0,0 +1,7 @@
+
+
+[data-start-seroval-value] {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}

package/dist/shared/dev-toolbar/functions/SerovalValue.d.ts

@@ -0,0 +1,7 @@
+import './SerovalValue.css';
+interface SerovalValueProps {
+    value: string | number | boolean | undefined | null;
+}
+export declare function SerovalValue(props: SerovalValueProps): import("solid-js").JSX.Element;
+export declare function PropertySeparator(): import("solid-js").JSX.Element;
+export {};

package/dist/shared/dev-toolbar/functions/SerovalValue.jsx

@@ -0,0 +1,10 @@
+import { Text } from "../../ui/Text.jsx";
+import './SerovalValue.css';
+export function SerovalValue(props) {
+    return (<Text data-start-seroval-value options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>
+      {`${props.value}`}
+    </Text>);
+}
+export function PropertySeparator() {
+    return <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>:</Text>;
+}

package/dist/shared/dev-toolbar/functions/SerovalViewer.css

@@ -0,0 +1,71 @@
+[data-start-seroval-viewer] {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+[data-start-seroval-promise] {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+[data-start-seroval-renderer] {
+  display: flex;
+  border-top: 1px oklch(87% 0.065 274.039) solid;
+  border-bottom: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-renderer] > * {
+  border-left: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-renderer]:last-child {
+  border-right: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-node] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+
+  width: 100%;
+  max-width: 16rem;
+}
+
+[data-start-seroval-node-header] {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgb(249 250 251);
+}
+
+[data-start-seroval-node-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-start-seroval-value] {
+  color: rgb(249 250 251);
+}
+
+[data-start-seroval-value-wrapper] {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-start-seroval-link] {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-start-seroval-link] > svg {
+  width: 1rem;
+  height: 1rem;
+}
+

package/dist/shared/dev-toolbar/functions/SerovalViewer.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+import "./SerovalViewer.css";
+export interface SerovalViewerProps {
+    stream: Request | Response;
+}
+export declare function SerovalViewer(props: SerovalViewerProps): JSX.Element;