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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { type JSX } from "solid-js";
+import "./styles.css";
+import { type ServerFunctionRequest, type ServerFunctionResponse } from "./tracker.ts";
+export interface ServerFunctionInstance {
+    request: ServerFunctionRequest;
+    response?: ServerFunctionResponse;
+}
+export interface ServerFunctionViewerProps {
+    instances: Record<string, ServerFunctionInstance | undefined>;
+    onDeleteInstance: (value: string) => void;
+    show?: boolean;
+}
+export declare function ServerFunctionViewer(props: ServerFunctionViewerProps): JSX.Element;

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

@@ -0,0 +1,216 @@
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { BODY_FORMAL_FILE, BODY_FORMAT_KEY, BodyFormat } from "../../../fns/shared.js";
+import { Badge } from "../../ui/Badge.jsx";
+import IconButton from "../../ui/IconButton.jsx";
+import Placeholder from "../../ui/Placeholder.jsx";
+import { Section } from "../../ui/Section.jsx";
+import { Select, SelectOption } from "../../ui/Select.jsx";
+import { Tab, TabGroup, TabList, TabPanel } from "../../ui/Tabs.jsx";
+import { Text } from "../../ui/Text.jsx";
+import { ArrowLeftIcon, FunctionIcon, TrashIcon } from "../icons.jsx";
+import { BlobViewer } from "./BlobViewer.jsx";
+import { FormDataViewer } from "./FormDataViewer.jsx";
+import { HeadersViewer } from "./HeadersViewer.jsx";
+import { HexViewer } from "./HexViewer.jsx";
+import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
+import { SerovalViewer } from "./SerovalViewer.jsx";
+import "./styles.css";
+import { URLSearchParamsViewer } from "./URLSearchParamsViewer.jsx";
+async function getFile(source) {
+    const formData = await source.formData();
+    const file = formData.get(BODY_FORMAL_FILE);
+    if (!(file && file instanceof File)) {
+        throw new Error("invalid file input");
+    }
+    return file;
+}
+async function getURLSearchParams(source) {
+    const text = await source.text();
+    return new URLSearchParams(text);
+}
+function ContentViewer(props) {
+    return (<>
+      <Section title="Headers">
+        <HeadersViewer headers={props.source.source.headers}/>
+      </Section>
+      <Section title="Body">
+        {(() => {
+            const source = props.source.source.clone();
+            const startType = source.headers.get(BODY_FORMAT_KEY);
+            const contentType = source.headers.get("Content-Type");
+            switch (true) {
+                case startType === "true":
+                case startType === BodyFormat.Seroval:
+                    return <SerovalViewer stream={source}/>;
+                case startType === BodyFormat.String:
+                    return <HexViewer bytes={source.bytes()}/>;
+                case startType === BodyFormat.File:
+                    return <BlobViewer source={getFile(source)}/>;
+                case startType === BodyFormat.FormData:
+                case contentType?.startsWith("multipart/form-data"):
+                    return <FormDataViewer source={source.formData()}/>;
+                case startType === BodyFormat.URLSearchParams:
+                case contentType?.startsWith("application/x-www-form-urlencoded"):
+                    return <URLSearchParamsViewer source={getURLSearchParams(source)}/>;
+                case startType === BodyFormat.Blob:
+                    return <BlobViewer source={source.blob()}/>;
+                case startType === BodyFormat.ArrayBuffer:
+                case startType === BodyFormat.Uint8Array:
+                    return <HexViewer bytes={source.bytes()}/>;
+            }
+        })()}
+      </Section>
+    </>);
+}
+function convertRequestToEntries(request) {
+    return [
+        ["Cache", request.cache],
+        ["Credentials", request.credentials],
+        ["Destination", request.destination],
+        ["Integrity", request.integrity],
+        ["Keep Alive", request.keepalive],
+        ["Mode", request.mode],
+        ["Redirect", request.redirect],
+        ["Referrer", request.referrer],
+        ["Referrer Policy", request.referrerPolicy],
+        ["URL", request.url],
+    ];
+}
+function RequestViewer(props) {
+    return (<TabPanel value="request">
+      <Section title="Information">
+        <For each={convertRequestToEntries(props.request.source)}>
+          {([key, value]) => (<div data-start-property>
+              <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
+              <PropertySeparator />
+              <SerovalValue value={value}/>
+            </div>)}
+        </For>
+      </Section>
+      <ContentViewer source={props.request}/>
+    </TabPanel>);
+}
+function convertResponseToEntries(response) {
+    return [
+        ["OK", response.ok],
+        ["Redirected", response.redirected],
+        ["Status", response.status],
+        ["Status Text", response.statusText],
+        ["Type", response.type],
+        ["URL", response.url],
+    ];
+}
+function ResponseViewer(props) {
+    return (<TabPanel value="response">
+      <Show when={props.response}>
+        {instance => (<>
+            <Section title="Information">
+              <For each={convertResponseToEntries(instance().source)}>
+                {([key, value]) => (<div data-start-property>
+                    <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
+                    <PropertySeparator />
+                    <SerovalValue value={value}/>
+                  </div>)}
+              </For>
+              <div data-start-property>
+                <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>Timing</Text>
+                <PropertySeparator />
+                <SerovalValue value={`${((instance().time - props.request.time) / 1000).toFixed(2)}s`}/>
+              </div>
+            </Section>
+            <ContentViewer source={instance()}/>
+          </>)}
+      </Show>
+    </TabPanel>);
+}
+function ServerFunctionInstanceDetail(props) {
+    return (<>
+      <span data-start-functions-instance-detail>
+        <Badge type="info">{props.value.request.source.method}</Badge>
+        <Text options={{ size: "xs" }}>{props.id}</Text>
+      </span>
+      <Show when={props.value.response}>
+        {response => {
+            if (response().source.ok) {
+                return <Badge type="success">{response().source.status}</Badge>;
+            }
+            return <Badge type="failure">{response().source.status}</Badge>;
+        }}
+      </Show>
+    </>);
+}
+function ServerFunctionInstanceViewer(props) {
+    const [tab, setTab] = createSignal("request");
+    return (<div data-start-function-instance-viewer>
+      <div data-start-function-instance-viewer-nav>
+        <div data-start-function-instance-viewer-nav-left>
+          <IconButton onClick={props.onReturn}>
+            <ArrowLeftIcon title="Go Back"/>
+          </IconButton>
+          <div>
+            <ServerFunctionInstanceDetail id={props.id} value={props.instance}/>
+          </div>
+        </div>
+        <div>
+          <IconButton onClick={props.onDelete}>
+            <TrashIcon title="Delete instance"/>
+          </IconButton>
+        </div>
+      </div>
+      <div data-start-function-instance-viewer-content>
+        <TabGroup horizontal value={tab()} onChange={value => setTab(value ?? "request")}>
+          <TabList>
+            <Tab value="request">Request</Tab>
+            <Tab value="response">Response</Tab>
+          </TabList>
+          <RequestViewer request={props.instance.request}/>
+          <ResponseViewer request={props.instance.request} response={props.instance.response}/>
+        </TabGroup>
+      </div>
+    </div>);
+}
+function EmptyServerFunctions() {
+    return (<Placeholder>
+      <Text options={{ size: "xs" }}>No server function calls detected.</Text>
+    </Placeholder>);
+}
+export function ServerFunctionViewer(props) {
+    const [currentInstance, setCurrentInstance] = createSignal();
+    const keys = createMemo(() => Object.keys(props.instances));
+    return (<Show when={props.show}>
+      <div data-start-dev-toolbar-panel>
+        <div data-start-functions-viewer>
+          {/* request/response viewer */}
+          <Show when={currentInstance()}>
+            {value => (<Show when={props.instances[value()]}>
+                {instance => (<ServerFunctionInstanceViewer id={value()} instance={instance()} onReturn={() => {
+                    setCurrentInstance(undefined);
+                }} onDelete={() => {
+                    props.onDeleteInstance(value());
+                }}/>)}
+              </Show>)}
+          </Show>
+          <Show when={!currentInstance()}>
+            {/* list of calls */}
+            <div data-start-functions-nav>
+              <FunctionIcon title="Server functions"/>
+              <Text options={{ size: "sm" }}>Server functions</Text>
+            </div>
+            <div data-start-functions-instances-container>
+              <Show when={keys().length} fallback={<EmptyServerFunctions />}>
+                <Select data-start-functions-instances horizontal={false} value={currentInstance()} onChange={current => setCurrentInstance(current)}>
+                  <For each={keys()}>
+                    {instance => (<SelectOption value={instance}>
+                        <Show when={props.instances[instance]}>
+                          {current => (<ServerFunctionInstanceDetail id={instance} value={current()}/>)}
+                        </Show>
+                      </SelectOption>)}
+                  </For>
+                </Select>
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </Show>);
+}

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

@@ -0,0 +1,109 @@
+[data-start-functions-instance-detail] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-start-functions-viewer] {
+  color: rgb(249 250 251);
+
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100%;
+}
+
+[data-start-functions-instances-container] {
+  color: rgb(249 250 251);
+  width: 100%;
+  min-height: 100%;
+  overflow: auto;
+}
+
+[data-start-functions-instances] {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+}
+
+[data-start-functions-instances] > [data-start-select-option] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  color: rgb(249 250 251);
+}
+
+[data-start-headers] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+[data-start-headers-title] {
+  font-weight: 500;
+}
+
+[data-start-properties] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-start-property] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  gap: 0.25rem;
+}
+
+[data-start-function-instance-viewer] {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+[data-start-function-instance-viewer-nav],
+[data-start-functions-nav] {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  justify-content: space-between;
+
+  position: sticky;
+  top: 0;
+
+  border-bottom: oklch(87% 0.065 274.039) 1px solid;
+
+  background: oklch(25.7% 0.09 281.288);
+}
+
+[data-start-functions-nav] svg {
+  padding: 0.25rem;
+}
+
+[data-start-function-instance-viewer-nav-left] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-start-function-instance-viewer-nav-left] > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-start-function-instance-viewer-content] {
+  height: 100%;
+}
+
+[data-start-function-instance-viewer-content] > [tc-tab-group] {
+  height: 100%;
+}

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

@@ -0,0 +1,19 @@
+export type ServerFunctionRequest = {
+    type: "request";
+    id: string;
+    instance: string;
+    source: Request;
+    time: number;
+};
+export type ServerFunctionResponse = {
+    type: "response";
+    id: string;
+    instance: string;
+    source: Response;
+    time: number;
+};
+export type ServerFunctionCall = ServerFunctionRequest | ServerFunctionResponse;
+export type ServerFunctionCallListener = (event: ServerFunctionCall) => void;
+export declare function captureServerFunctionCall(listener: ServerFunctionCallListener): () => void;
+export declare function pushRequest(id: string, instance: string, source: Request): void;
+export declare function pushResponse(id: string, instance: string, source: Response): void;

package/dist/shared/dev-toolbar/functions/tracker.js

@@ -0,0 +1,29 @@
+const LISTENERS = new Set();
+export function captureServerFunctionCall(listener) {
+    LISTENERS.add(listener);
+    return () => LISTENERS.delete(listener);
+}
+export function pushRequest(id, instance, source) {
+    const event = {
+        type: "request",
+        id,
+        instance,
+        source,
+        time: performance.now(),
+    };
+    for (const listener of new Set(LISTENERS)) {
+        listener(event);
+    }
+}
+export function pushResponse(id, instance, source) {
+    const event = {
+        type: "response",
+        id,
+        instance,
+        source,
+        time: performance.now(),
+    };
+    for (const listener of new Set(LISTENERS)) {
+        listener(event);
+    }
+}

package/dist/shared/{dev-overlay → dev-toolbar}/icons.d.ts

@@ -23,6 +23,15 @@ export declare function DiscordIcon(props: JSX.IntrinsicElements["svg"] & {
 export declare function GithubIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
+export declare function ErrorIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
 export declare function SolidStartIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
+export declare function FunctionIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function TrashIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;

package/dist/shared/{dev-overlay → dev-toolbar}/icons.jsx

@@ -48,11 +48,17 @@ export function GithubIcon(props) {
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path>
     </svg>);
 }
+export function ErrorIcon(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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
+    </svg>);
+}
 export function SolidStartIcon(props) {
     return (<svg viewBox="0 0 701 701" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <title>{props.title}</title>
       <g filter="url(#filter0_d_1_2)">
-        <rect width="693" height="693" transform="translate(4)" fill="white"/>
+        <rect width="693" height="693" transform="translate(4)" fill="none"/>
         <mask id="mask0_1_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="323" y="556" width="174" height="72">
           <path d="M323.508 627.978L435.81 619.384C435.81 619.384 474.315 613.168 496.842 576.082L417.413 556.809L323.508 627.978Z" fill="white"/>
         </mask>
@@ -148,3 +154,15 @@ export function SolidStartIcon(props) {
       </defs>
     </svg>);
 }
+export function FunctionIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <title>{props.title}</title>
+      <path d="M6.59 19H5v2h1.59c3.02 0 5.58-2.26 5.95-5.26l.47-3.74H17v-2h-3.74l.3-2.37A3.01 3.01 0 0 1 16.54 5h2.47V3h-2.47a5 5 0 0 0-4.96 4.38L11.25 10H7.01v2H11l-.44 3.5c-.25 2-1.96 3.5-3.97 3.5"></path>
+    </svg>);
+}
+export function TrashIcon(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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
+    </svg>);
+}

package/dist/shared/dev-toolbar/index.css

@@ -0,0 +1,88 @@
+[data-start-dev-toolbar] {
+  position: fixed;
+
+  bottom: 0px;
+  left: 0px;
+
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+
+  cursor: grab;
+}
+
+[data-start-dev-toolbar]:active {
+  cursor: grabbing;
+}
+
+[data-start-dev-toolbar] > [tc-toolbar] {
+  position: relative;
+
+  background: oklch(25.7% 0.09 281.288);
+  margin: 1rem;
+  padding: 0.25rem 0.5rem;
+
+  overflow: hidden;
+  border-radius: 9999px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.5rem;
+
+  border: oklch(87% 0.065 274.039) 1px solid;
+}
+
+[data-start-dev-toolbar] > [tc-toolbar] > div {
+  display: flex;
+
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-start-dev-toolbar] > [tc-toolbar] > div:last-child {
+  border-left: rgb(249 250 251) 1px solid;
+  padding-left: 0.5rem;
+
+  gap: 0.5rem;
+}
+
+[data-start-dev-toolbar-version] {
+  border-radius: 9999px;
+  color: rgb(249 250 251);
+  padding: 0.125rem 0.5rem;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+
+  border: oklch(87% 0.065 274.039) 1px solid;
+}
+
+[data-start-dev-toolbar-version] > div {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+[data-start-dev-toolbar] svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+[data-start-dev-toolbar-panel] {
+  border: oklch(87% 0.065 274.039) 1px solid;
+  background: oklch(25.7% 0.09 281.288);
+  margin: 0rem 1rem;
+
+  overflow: auto;
+
+  width: 50rem;
+  height: 30rem;
+
+  max-width: calc(100vw - 10rem);
+  max-height: calc(100vh - 2rem);
+
+  border-radius: 1rem;
+}

package/dist/shared/dev-toolbar/index.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+import "./index.css";
+export interface DevToolbarProps {
+    children?: JSX.Element;
+}
+export declare function DevToolbar(props: DevToolbarProps): JSX.Element;