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

package/dist/shared/dev-toolbar/error-viewer/styles.css

@@ -0,0 +1,224 @@
+[data-start-error-viewer] {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+[data-start-error-viewer-navbar] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-start-error-viewer-pagination] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  color: rgb(249 250 251);
+  background-color: rgb(17 24 39);
+  padding: 0.25rem;
+}
+
+[data-start-error-viewer-button] {
+  /* empty */
+}
+
+[data-start-error-viewer-button]:hover {
+  color: rgb(229 231 235);
+  background-color: rgb(55 65 81);
+}
+
+[data-start-error-viewer-button]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  outline-color: rgb(229 231 235);
+}
+
+[data-start-error-viewer-button]:focus-visible {
+  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+}
+
+[data-start-error-viewer-button]:active {
+  color: rgb(243 244 246);
+  background-color: rgb(31 41 55);
+}
+
+[data-start-error-viewer-button] > svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+[data-start-error-viewer-page-counter] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+[data-start-error-viewer-navbar-left] {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+[data-start-error-viewer-controls] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  color: rgb(249 250 251);
+  padding: 0.25rem;
+}
+
+[data-start-error-viewer-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: oklch(87% 0.065 274.039);
+}
+
+[data-start-error-viewer-error-info] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-start-error-viewer-error-info-name] {
+  font-weight: 700;
+  color: rgb(249 250 251);
+}
+
+[data-start-error-viewer-error-info-message] {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  color: rgb(239 68 68);
+  font-weight: 700;
+}
+
+[data-start-error-viewer-stack-frames-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+[data-start-error-viewer-stack-frames] {
+  flex: 1 1 0%;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+[data-start-error-viewer-stack-frame] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: rgb(249 250 251);
+  cursor: default;
+  user-select: none;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+}
+
+[data-start-error-viewer-stack-frame][tc-active],
+[data-start-error-viewer-stack-frame][tc-selected],
+[data-start-error-viewer-stack-frame]:focus {
+  color: rgb(219 234 254);
+  background-color: rgb(30 58 138);
+}
+
+[data-start-error-viewer-stack-frame-function] {
+  font-weight: 700;
+}
+
+[data-start-error-viewer-stack-frame-file] {
+  white-space: nowrap;
+  font-size: 0.75rem;
+  /* 12px */
+  line-height: 1rem;
+  /* 16px */
+}
+
+[data-start-error-viewer-stack-frames-code] {
+  padding: 0.5rem 1rem;
+  gap: 0.25rem;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background-color: rgb(17 24 39);
+}
+
+[data-start-error-viewer-stack-frames-code-fallback] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(249 250 251);
+  min-height: 16rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+[data-start-error-viewer-stack-frames-code-source] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(249 250 251);
+}
+
+[data-start-error-viewer-stack-frames-code-container] {
+  width: 100%;
+  overflow: hidden;
+  min-width: 100%;
+  max-height: 16rem;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: oklch(87% 0.065 274.039);
+}
+
+[data-start-error-viewer-code-view] {
+  overflow: auto;
+  min-width: 100%;
+}
+
+[data-start-error-viewer-code-view] > .shiki {
+  float: left;
+  min-width: 100%;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  counter-reset: step;
+  counter-increment: step calc(var(--error-viewer-code-view-start, 1) - 1);
+  background-color: transparent !important;
+}
+
+[data-start-error-viewer-code-view] > .shiki .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}
+
+[data-start-error-viewer-error-line] {
+  background-color: rgba(239, 68, 68, 0.4);
+}

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

@@ -0,0 +1,4 @@
+[data-start-blob-viewer] svg {
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+import "./BlobViewer.css";
+export interface BlobViewerProps {
+    source: Blob | File | Promise<Blob | File>;
+}
+export declare function BlobViewer(props: BlobViewerProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+import { createMemo, createResource, onCleanup, Show, Suspense } from "solid-js";
+import { Badge } from "../../ui/Badge.jsx";
+import Button from "../../ui/Button.jsx";
+import "./BlobViewer.css";
+function DocumentIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <title>{props.title}</title>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
+    </svg>);
+}
+function BlobViewerInner(props) {
+    const fileURL = createMemo(() => URL.createObjectURL(props.source));
+    onCleanup(() => {
+        URL.revokeObjectURL(fileURL());
+    });
+    function openFileInNewTab() {
+        const link = document.createElement("a");
+        link.href = fileURL();
+        link.target = "_blank"; // Open in a new tab
+        link.style.display = "none"; // Hide the link
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    return (<Button data-start-blob-viewer onClick={() => openFileInNewTab()}>
+      {props.source instanceof File ? (<Badge type="info">
+          <DocumentIcon title={props.source.name}/>
+          {props.source.name}
+        </Badge>) : (<Badge type="info">{props.source.type}</Badge>)}
+    </Button>);
+}
+export function BlobViewer(props) {
+    const [data] = createResource(() => props.source);
+    return (<Suspense>
+      <Show when={data()}>{current => <BlobViewerInner source={current()}/>}</Show>
+    </Suspense>);
+}

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

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+export interface FormDataViewerProps {
+    source: FormData | Promise<FormData>;
+}
+export declare function FormDataViewer(props: FormDataViewerProps): JSX.Element;

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

@@ -0,0 +1,23 @@
+import { createResource, For, Show, Suspense } from "solid-js";
+import { Section } from "../../ui/Section.jsx";
+import { BlobViewer } from "./BlobViewer.jsx";
+import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
+function FormDataViewerInner(props) {
+    return (<Section title="FormData" options={{ size: "sm" }}>
+      <div data-start-form-data-viewer data-start-properties>
+        <For each={Array.from(props.source.entries())}>
+          {([key, value]) => (<div data-start-property>
+              <SerovalValue value={`"${key}"`}/>
+              <PropertySeparator />
+              {typeof value === "string" ? (<SerovalValue value={`"${JSON.stringify(value)}"`}/>) : (<BlobViewer source={value}/>)}
+            </div>)}
+        </For>
+      </div>
+    </Section>);
+}
+export function FormDataViewer(props) {
+    const [data] = createResource(() => props.source);
+    return (<Suspense>
+      <Show when={data()}>{current => <FormDataViewerInner source={current()}/>}</Show>
+    </Suspense>);
+}

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

@@ -0,0 +1,8 @@
+[data-start-headers-viewer] {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-start-headers-viewer] > [data-start-property] > *:first-child {
+  text-transform: capitalize;
+}

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

@@ -0,0 +1,6 @@
+import "./HeadersViewer.css";
+interface HeadersViewerProps {
+    headers: Headers;
+}
+export declare function HeadersViewer(props: HeadersViewerProps): import("solid-js").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { For } from "solid-js";
+import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
+import "./HeadersViewer.css";
+import { Text } from "../../ui/Text.jsx";
+export function HeadersViewer(props) {
+    return (<div data-start-headers-viewer data-start-properties>
+      <For each={Array.from(props.headers.entries())}>
+        {([key, value]) => (<div data-start-property>
+            <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
+            <PropertySeparator />
+            <SerovalValue value={value}/>
+          </div>)}
+      </For>
+    </div>);
+}

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

@@ -0,0 +1,34 @@
+[data-start-hex-viewer] {
+  display: flex;
+  border: 1px oklch(87% 0.065 274.039) 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(87% 0.065 274.039) solid;
+}
+
+[data-start-hex-row] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+[data-start-hex-text] {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}

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

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import "./HexViewer.css";
+interface HexViewerInnerProps {
+    bytes: Uint8Array;
+}
+export declare function HexViewerInner(props: HexViewerInnerProps): JSX.Element;
+export interface HexViewerProps {
+    bytes: Uint8Array | Promise<Uint8Array>;
+}
+export declare function HexViewer(props: HexViewerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,70 @@
+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,5 @@
+[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,70 @@
+[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;