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

package/dist/shared/HttpHeader.jsx

@@ -0,0 +1,38 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { appendHeader, setHeader } from "../http/index.js";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-header
+ */
+export const HttpHeader = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        if (props.append)
+            appendHeader(props.name, props.value);
+        else
+            setHeader(props.name, props.value);
+        onCleanup(() => {
+            // @ts-expect-error
+            if (event.nativeEvent.handled || event.complete)
+                return;
+            const value = event.response.headers.get(props.name);
+            if (!value)
+                return;
+            if (!value.includes(", ")) {
+                if (value === props.value)
+                    event.response.headers.delete(props.name);
+                return;
+            }
+            const values = value.split(", ");
+            const index = values.indexOf(props.value);
+            index !== -1 && values.splice(index, 1);
+            if (values.length)
+                event.response.headers.set(props.name, values.join(","));
+            else
+                event.response.headers.delete(props.name);
+        });
+        return null;
+    }
+    : (_props) => null;

package/dist/shared/HttpStatusCode.d.ts

@@ -0,0 +1,9 @@
+export interface HttpStatusCodeProps {
+    code: number;
+    text?: string;
+}
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-status-code
+ */
+export declare const HttpStatusCode: (props: HttpStatusCodeProps) => null;

package/dist/shared/HttpStatusCode.js

@@ -0,0 +1,18 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-status-code
+ */
+export const HttpStatusCode = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        event.response.status = props.code;
+        event.response.statusText = props.text;
+        onCleanup(() => 
+        // !event.nativeEvent.handled &&
+        !event.complete && (event.response.status = 200));
+        return null;
+    }
+    : (_props) => null;

package/dist/shared/clientOnly.d.ts

@@ -0,0 +1,12 @@
+import type { Component, ComponentProps, JSX } from "solid-js";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+export default function clientOnly<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>, options?: {
+    lazy?: boolean;
+}): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;

package/dist/shared/clientOnly.js

@@ -0,0 +1,27 @@
+import { createMemo, createSignal, onMount, sharedConfig, splitProps, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+// not using Suspense
+export default function clientOnly(fn, options = {}) {
+    if (isServer)
+        return (props) => props.fallback;
+    const [comp, setComp] = createSignal();
+    !options.lazy && load(fn, setComp);
+    return (props) => {
+        let Comp;
+        let m;
+        const [, rest] = splitProps(props, ["fallback"]);
+        options.lazy && load(fn, setComp);
+        if ((Comp = comp()) && !sharedConfig.context)
+            return Comp(rest);
+        const [mounted, setMounted] = createSignal(!sharedConfig.context);
+        onMount(() => setMounted(true));
+        return createMemo(() => ((Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))));
+    };
+}
+function load(fn, setComp) {
+    fn().then(m => setComp(() => m.default));
+}

package/dist/shared/dev-overlay/CodeView.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface CodeViewProps {
+    fileName: string;
+    content: string;
+    line: number;
+}
+export declare function CodeView(props: CodeViewProps): JSX.Element | null;

package/dist/shared/dev-overlay/CodeView.jsx

@@ -0,0 +1,62 @@
+// @refresh skip
+import { getSingletonHighlighter } from "shiki";
+import { loadWasm } from "shiki/engine/oniguruma";
+import langJS from "shiki/langs/javascript.mjs";
+import langJSX from "shiki/langs/jsx.mjs";
+import langTSX from "shiki/langs/tsx.mjs";
+import langTS from "shiki/langs/typescript.mjs";
+import url from "shiki/onig.wasm?url";
+import darkPlus from "shiki/themes/dark-plus.mjs";
+import { createEffect, createResource } from "solid-js";
+let HIGHLIGHTER;
+async function loadHighlighter() {
+    if (!HIGHLIGHTER) {
+        await loadWasm(await fetch(url));
+        HIGHLIGHTER = await getSingletonHighlighter({
+            themes: [darkPlus],
+            langs: [langJS, langJSX, langTS, langTSX],
+        });
+    }
+    return HIGHLIGHTER;
+}
+const RANGE = 8;
+export function CodeView(props) {
+    const lines = () => props.content.split("\n").map((item, index) => ({
+        index: index + 1,
+        line: item,
+    }));
+    const minLine = () => Math.max(props.line - (1 + RANGE), 0);
+    const maxLine = () => Math.min(props.line + RANGE, lines().length - 1);
+    let ref;
+    const [data] = createResource(() => lines()
+        .slice(minLine(), maxLine())
+        .map(item => item.line)
+        .join("\n"), async (value) => {
+        const highlighter = await loadHighlighter();
+        const fileExtension = props.fileName.split(/[#?]/)[0].split(".").pop()?.trim();
+        let lang = fileExtension;
+        if (fileExtension === "mjs" || fileExtension === "cjs") {
+            lang = "js";
+        }
+        return highlighter.codeToHtml(value, {
+            theme: "dark-plus",
+            lang,
+        });
+    });
+    createEffect(() => {
+        const result = data();
+        if (ref && result) {
+            ref.innerHTML = result;
+            const lines = ref.querySelectorAll('span[class="line"]');
+            for (let i = 0, len = lines.length; i < len; i++) {
+                const el = lines[i];
+                if (props.line - minLine() - 1 === i) {
+                    el.dataset.startDevOverlayErrorLine = '';
+                }
+            }
+        }
+    });
+    return (<div ref={ref} data-start-dev-overlay-code-view style={{
+            "--dev-overlay-code-view-start": minLine() + 1,
+        }}/>);
+}

package/dist/shared/dev-overlay/DevOverlayDialog.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "solid-js";
+import "./styles.css";
+export declare function classNames(...classes: (string | boolean | undefined)[]): string;
+interface DevOverlayDialogProps {
+    errors: any[];
+    resetError: () => void;
+}
+export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Element;
+export {};

package/dist/shared/dev-overlay/DevOverlayDialog.jsx

@@ -0,0 +1,226 @@
+// @refresh skip
+import ErrorStackParser from "error-stack-parser";
+import * as htmlToImage from "html-to-image";
+import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
+import { Portal } from "solid-js/web";
+// @ts-ignore - terracotta module resolution issue with NodeNext
+import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
+import info from "../../../package.json" with { type: "json" };
+import { CodeView } from "./CodeView.jsx";
+import { createStackFrame } from "./createStackFrame.js";
+import download from "./download.js";
+import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon, } from "./icons.jsx";
+import "./styles.css";
+export function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+function ErrorInfo(props) {
+    const error = createMemo(() => {
+        const e = props.error;
+        if (e instanceof Error) {
+            return { name: e.name, message: e.message };
+        }
+        if (e instanceof ErrorEvent) {
+            return { message: e.message };
+        }
+        return { message: e.toString() };
+    });
+    return (<span data-start-dev-overlay-error-info>
+      <span data-start-dev-overlay-error-info-name>{error().name}</span>
+      <span data-start-dev-overlay-error-info-message>{error().message}</span>
+    </span>);
+}
+function getFileName(source) {
+    try {
+        const path = source.startsWith("/") ? new URL(source, "file://") : new URL(source);
+        const paths = path.pathname.split("/");
+        return paths[paths.length - 1];
+    }
+    catch (error) {
+        return getFileName(`/${source}`);
+    }
+}
+function getFilePath(source) {
+    const line = source.line ? `:${source.line}` : "";
+    const column = source.column ? `:${source.column}` : "";
+    return `${getFileName(source.source)}${line}${column}`;
+}
+function CodeFallback() {
+    return (<div data-start-dev-overlay-stack-frames-code-fallback>
+      <span>Source not available.</span>
+    </div>);
+}
+function StackFramesContent(props) {
+    const stackframes = ErrorStackParser.parse(props.error);
+    const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
+    return (<div data-start-dev-overlay-stack-frames-content>
+      <div data-start-dev-overlay-stack-frames-code>
+        <ErrorBoundary fallback={null}>
+          {(() => {
+            const data = createStackFrame(selectedFrame(), () => props.isCompiled);
+            return (<Suspense fallback={<CodeFallback />}>
+                <Show when={data()} keyed fallback={<CodeFallback />}>
+                  {source => (<>
+                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
+                      <div data-start-dev-overlay-stack-frames-code-container>
+                        <CodeView fileName={source.source} line={source.line} content={source.content}/>
+                      </div>
+                    </>)}
+                </Show>
+              </Suspense>);
+        })()}
+        </ErrorBoundary>
+      </div>
+      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
+        <For each={stackframes}>
+          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
+                  <span data-start-dev-overlay-stack-frame-function>
+                    {current.functionName ?? "<anonymous>"}
+                  </span>
+                  <span data-start-dev-overlay-stack-frame-file>
+                    {getFilePath({
+                    source: current.getFileName(),
+                    content: "",
+                    line: current.getLineNumber(),
+                    column: current.getColumnNumber(),
+                    name: current.getFunctionName(),
+                })}
+                  </span>
+                </div>}>
+              {(() => {
+                const data = createStackFrame(current, () => props.isCompiled);
+                return (<Suspense>
+                    <Show when={data()} keyed>
+                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
+                          <span data-start-dev-overlay-stack-frame-function>
+                            {source.name ?? "<anonymous>"}
+                          </span>
+                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
+                        </SelectOption>)}
+                    </Show>
+                  </Suspense>);
+            })()}
+            </ErrorBoundary>)}
+        </For>
+      </Select>
+    </div>);
+}
+function StackFrames(props) {
+    return (<Show when={props.error instanceof Error && props.error} keyed>
+      {current => <StackFramesContent error={current} isCompiled={props.isCompiled}/>}
+    </Show>);
+}
+const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
+const DISCORD_INVITE = "https://discord.com/invite/solidjs";
+export default function DevOverlayDialog(props) {
+    const [currentPage, setCurrentPage] = createSignal(1);
+    const [isCompiled, setIsCompiled] = createSignal(false);
+    const length = createMemo(() => props.errors.length);
+    const truncated = createMemo(() => {
+        return Math.min(currentPage(), length());
+    });
+    function goPrev() {
+        setCurrentPage(c => {
+            if (c > 1) {
+                return c - 1;
+            }
+            return length();
+        });
+    }
+    function goNext() {
+        setCurrentPage(c => {
+            if (c < length()) {
+                return c + 1;
+            }
+            return 1;
+        });
+    }
+    function toggleIsCompiled() {
+        setIsCompiled(c => !c);
+    }
+    const [panel, setPanel] = createSignal();
+    function downloadScreenshot() {
+        const current = panel();
+        if (current) {
+            htmlToImage
+                .toPng(current, {
+                style: {
+                    transform: "scale(0.75)",
+                },
+            })
+                .then(url => {
+                download(url, "start-screenshot.png");
+            });
+        }
+    }
+    function redirectToGithub() {
+        const url = new URL(ISSUE_THREAD);
+        url.searchParams.append("labels", "bug");
+        url.searchParams.append("labels", "needs+triage");
+        url.searchParams.append("template", "bug.yml");
+        url.searchParams.append("title", `[Bug?]:` + props.errors[truncated() - 1].toString());
+        window.open(url, "_blank").focus();
+    }
+    function redirectToDiscord() {
+        window.open(DISCORD_INVITE, "_blank").focus();
+    }
+    return (<Portal>
+      <Dialog data-start-dev-overlay isOpen>
+        <div>
+          <DialogOverlay data-start-dev-overlay-background/>
+          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
+            <div data-start-dev-overlay-panel>
+              <div data-start-dev-overlay-navbar>
+                <div data-start-dev-overlay-navbar-left>
+                  <div data-start-dev-overlay-version>
+                    <div>
+                      <SolidStartIcon title="Solid Start Version"/>
+                    </div>
+                    <span>{info.version}</span>
+                  </div>
+                  <Show when={props.errors.length > 1}>
+                    <div data-start-dev-overlay-pagination>
+                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
+                        <ArrowLeftIcon title="Go Previous"/>
+                      </button>
+                      <div data-start-dev-overlay-page-counter>
+                        {`${truncated()} of ${props.errors.length}`}
+                      </div>
+                      <button data-start-dev-overlay-button onClick={goNext} type="button">
+                        <ArrowRightIcon title="Go Next"/>
+                      </button>
+                    </div>
+                  </Show>
+                </div>
+                <div data-start-dev-overlay-controls>
+                  <button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
+                    <GithubIcon title="Create an issue thread on Github"/>
+                  </button>
+                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
+                    <DiscordIcon title="Join our Discord Channel"/>
+                  </button>
+                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
+                    <CameraIcon title="Capture Error Overlay"/>
+                  </button>
+                  <button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
+                    <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
+                      <ViewCompiledIcon title="View Compiled Source"/>
+                    </Show>
+                  </button>
+                  <button data-start-dev-overlay-button onClick={props.resetError} type="button">
+                    <RefreshIcon title="Reset Error"/>
+                  </button>
+                </div>
+              </div>
+              <Show when={props.errors[truncated() - 1]} keyed>
+                {current => (<div data-start-dev-overlay-content>
+                    <ErrorInfo error={current}/>
+                    <StackFrames error={current} isCompiled={isCompiled()}/>
+                  </div>)}
+              </Show>
+            </div>
+          </DialogPanel>
+        </div>
+      </Dialog>
+    </Portal>);
+}

package/dist/shared/dev-overlay/createStackFrame.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from "solid-js";
+export interface StackFrameSource {
+    content: string;
+    source: string;
+    name?: string;
+    line: number;
+    column: number;
+}
+export declare function createStackFrame(stackframe: StackFrame, isCompiled: () => boolean): Accessor<StackFrameSource>;

package/dist/shared/dev-overlay/createStackFrame.js

@@ -0,0 +1,56 @@
+import { createMemo, createResource } from "solid-js";
+import getSourceMap from "./get-source-map.js";
+function getActualFileSource(path) {
+    if (path.startsWith("file://")) {
+        return "/_build/@fs" + path.substring("file://".length);
+    }
+    return path;
+}
+export function createStackFrame(stackframe, isCompiled) {
+    const [data] = createResource(() => ({
+        fileName: stackframe.fileName,
+        line: stackframe.lineNumber,
+        column: stackframe.columnNumber,
+        functionName: stackframe.functionName,
+    }), async (source) => {
+        if (!source.fileName) {
+            return null;
+        }
+        const response = await fetch(getActualFileSource(source.fileName));
+        if (!response.ok) {
+            return null;
+        }
+        const content = await response.text();
+        const sourceMap = await getSourceMap(source.fileName, content);
+        return {
+            source,
+            content,
+            sourceMap,
+        };
+    });
+    const info = createMemo(() => {
+        const current = data();
+        if (!current) {
+            return undefined;
+        }
+        const { source, content, sourceMap } = current;
+        if (!isCompiled() && source.line && source.column && sourceMap) {
+            const result = sourceMap.originalPositionFor({
+                line: source.line,
+                column: source.column,
+            });
+            return {
+                ...result,
+                content: sourceMap.sourceContentFor(result.source),
+            };
+        }
+        return {
+            source: source.fileName,
+            line: source.line,
+            column: source.column,
+            name: source.functionName,
+            content,
+        };
+    });
+    return info;
+}

package/dist/shared/dev-overlay/download.d.ts

@@ -0,0 +1 @@
+export default function download(dataurl: string, filename: string): void;

package/dist/shared/dev-overlay/download.js

@@ -0,0 +1,6 @@
+export default function download(dataurl, filename) {
+    const link = document.createElement("a");
+    link.href = dataurl;
+    link.download = filename;
+    link.click();
+}

package/dist/shared/dev-overlay/get-source-map.d.ts

@@ -0,0 +1,2 @@
+import { SourceMapConsumer } from "source-map-js";
+export default function getSourceMap(url: string, content: string): Promise<SourceMapConsumer | null>;

package/dist/shared/dev-overlay/get-source-map.js

@@ -0,0 +1,25 @@
+import { SourceMapConsumer } from "source-map-js";
+const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
+const SOURCEMAP_REGEX = /(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/;
+export default async function getSourceMap(url, content) {
+    const lines = content.split("\n");
+    let sourceMapUrl;
+    for (let i = lines.length - 1; i >= 0 && !sourceMapUrl; i--) {
+        const result = lines[i].match(SOURCEMAP_REGEX);
+        if (result) {
+            sourceMapUrl = result[1];
+        }
+    }
+    if (!sourceMapUrl) {
+        return null;
+    }
+    if (!(INLINE_SOURCEMAP_REGEX.test(sourceMapUrl) || sourceMapUrl.startsWith("/"))) {
+        // Resolve path if it's a relative access
+        const parsedURL = url.split("/");
+        parsedURL[parsedURL.length - 1] = sourceMapUrl;
+        sourceMapUrl = parsedURL.join("/");
+    }
+    const response = await fetch(sourceMapUrl);
+    const rawSourceMap = await response.json();
+    return new SourceMapConsumer(rawSourceMap);
+}

package/dist/shared/dev-overlay/icons.d.ts

@@ -0,0 +1,28 @@
+import type { JSX } from "solid-js";
+export declare function ArrowRightIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function ArrowLeftIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function RefreshIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function ViewCompiledIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function ViewOriginalIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function CameraIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function DiscordIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function GithubIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;
+export declare function SolidStartIcon(props: JSX.IntrinsicElements["svg"] & {
+    title: string;
+}): JSX.Element;