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

package/src/server/types.ts

@@ -1,82 +0,0 @@
-import type { H3Event } from "h3";
-import type { JSX } from "solid-js";
-import type { RequestEvent } from "solid-js/web";
-
-// export const FETCH_EVENT = "$FETCH";
-
-export type DocumentComponentProps = {
-  assets?: JSX.Element;
-  scripts: JSX.Element;
-  children?: JSX.Element;
-};
-
-export type Asset =
-  | {
-      tag: "style";
-      attrs: JSX.StyleHTMLAttributes<HTMLStyleElement> & { key?: string };
-      children?: JSX.Element;
-    }
-  | {
-      tag: "script";
-      attrs: JSX.ScriptHTMLAttributes<HTMLScriptElement> & { key?: string };
-    }
-  | {
-      tag: "link";
-      attrs: JSX.LinkHTMLAttributes<HTMLLinkElement> & { key?: string };
-    };
-
-export type HandlerOptions = {
-  mode?: "sync" | "async" | "stream";
-  nonce?: string;
-  renderId?: string;
-  onCompleteAll?: (options: { write: (v: any) => void }) => void;
-  onCompleteShell?: (options: { write: (v: any) => void }) => void;
-};
-
-export type ContextMatches = {
-  originalPath: string;
-  pattern: string;
-  path: string;
-  params: unknown;
-};
-
-export interface ResponseStub {
-  status?: number;
-  statusText?: string;
-  headers: Headers;
-}
-
-export interface FetchEvent {
-  request: Request;
-  response: ResponseStub;
-  clientAddress?: string;
-  locals: App.RequestEventLocals;
-  nativeEvent: H3Event;
-}
-
-export interface PageEvent extends RequestEvent {
-  assets: any[];
-  routes: any[];
-  // prevUrl: string | null;
-  // $type: typeof FETCH_EVENT;
-  $islands: Set<string>;
-  complete: boolean;
-  nonce?: string;
-  // mutation: boolean;
-}
-
-export interface APIEvent extends FetchEvent {
-  params: { [key: string]: string };
-}
-
-export type APIHandler = (event: APIEvent) => any;
-
-export interface ServerFunctionMeta {
-  id: string;
-}
-
-declare module "solid-js/web" {
-  interface RequestEvent extends FetchEvent {
-    serverOnly?: boolean;
-  }
-}

package/src/server/util.ts

@@ -1,12 +0,0 @@
-import type { ResponseStub } from "./types.ts";
-
-// according to https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages
-const validRedirectStatuses = new Set([301, 302, 303, 307, 308]);
-
-export function getExpectedRedirectStatus(response: ResponseStub): number {
-  if (response.status && validRedirectStatuses.has(response.status)) {
-    return response.status;
-  }
-
-  return 302;
-}

package/src/shared/ErrorBoundary.tsx

@@ -1,52 +0,0 @@
-// @refresh skip
-import { ErrorBoundary as DefaultErrorBoundary, catchError, type ParentProps } from "solid-js";
-import { isServer } from "solid-js/web";
-import { HttpStatusCode } from "./HttpStatusCode.ts";
-import { DevOverlay } from "./dev-overlay/index.tsx";
-
-export const ErrorBoundary =
-  import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
-    ? (props: ParentProps) => <DevOverlay>{props.children}</DevOverlay>
-    : (props: ParentProps) => {
-        const message = isServer
-          ? "500 | Internal Server Error"
-          : "Error | Uncaught Client Exception";
-        return (
-          <DefaultErrorBoundary
-            fallback={error => {
-              console.error(error);
-              return (
-                <>
-                  <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
-                    {message}
-                  </span>
-                  <HttpStatusCode code={500} />
-                </>
-              );
-            }}
-          >
-            {props.children}
-          </DefaultErrorBoundary>
-        );
-      };
-
-export const TopErrorBoundary = (props: ParentProps) => {
-  let isError = false;
-  const res = catchError(
-    () => props.children,
-    err => {
-      console.error(err);
-      isError = !!err;
-    },
-  );
-  return isError ? (
-    <>
-      <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
-        500 | Internal Server Error
-      </span>
-      <HttpStatusCode code={500} />
-    </>
-  ) : (
-    res
-  );
-};

package/src/shared/GET.ts

@@ -1,8 +0,0 @@
-// @refresh skip
-/**
- *
- * Read more: https://docs.solidjs.com/solid-start/reference/server/get
- */
-export function GET<T extends (...args: any[]) => any>(fn: T) {
-  return (fn as any).GET as (...args: Parameters<T>) => ReturnType<T>;
-}

package/src/shared/HttpHeader.tsx

@@ -1,42 +0,0 @@
-// @refresh skip
-import { onCleanup } from "solid-js";
-import { getRequestEvent, isServer } from "solid-js/web";
-
-import type { PageEvent } from "../server/types.ts";
-import { appendHeader, setHeader } from "../http/index.ts";
-
-export interface HttpHeaderProps {
-  name: string;
-  value: string;
-  append?: boolean;
-}
-
-/**
- *
- * Read more: https://docs.solidjs.com/solid-start/reference/server/http-header
- */
-export const HttpHeader = isServer
-  ? (props: HttpHeaderProps) => {
-      const event = getRequestEvent() as PageEvent;
-
-      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: HttpHeaderProps) => null;

package/src/shared/HttpStatusCode.ts

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

package/src/shared/clientOnly.ts

@@ -1,44 +0,0 @@
-// @refresh skip
-import type { Component, ComponentProps, JSX, Setter } from "solid-js";
-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<T extends Component<any>>(
-  fn: () => Promise<{
-    default: T;
-  }>,
-  options: { lazy?: boolean } = {},
-) {
-  if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
-
-  const [comp, setComp] = createSignal<T>();
-  !options.lazy && load(fn, setComp);
-  return (props: ComponentProps<T>) => {
-    let Comp: T | undefined;
-    let m: boolean;
-    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<T>(
-  fn: () => Promise<{
-    default: T;
-  }>,
-  setComp: Setter<T>,
-) {
-  fn().then(m => setComp(() => m.default));
-}

package/src/shared/dev-overlay/CodeView.tsx

@@ -1,90 +0,0 @@
-// @refresh skip
-import { type BuiltinLanguage, getSingletonHighlighter, type Highlighter } 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, type JSX } from "solid-js";
-
-let HIGHLIGHTER: Highlighter;
-
-async function loadHighlighter() {
-  if (!HIGHLIGHTER) {
-    await loadWasm(await fetch(url));
-    HIGHLIGHTER = await getSingletonHighlighter({
-      themes: [darkPlus],
-      langs: [langJS, langJSX, langTS, langTSX],
-    });
-  }
-  return HIGHLIGHTER;
-}
-
-export interface CodeViewProps {
-  fileName: string;
-  content: string;
-  line: number;
-}
-
-const RANGE = 8;
-
-export function CodeView(props: CodeViewProps): JSX.Element | null {
-  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: HTMLDivElement | undefined;
-
-  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 as BuiltinLanguage;
-      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] as HTMLElement;
-        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/src/shared/dev-overlay/DevOverlayDialog.tsx

@@ -1,316 +0,0 @@
-// @refresh skip
-import ErrorStackParser from "error-stack-parser";
-import * as htmlToImage from "html-to-image";
-import type { JSX } from "solid-js";
-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.tsx";
-import { createStackFrame, type StackFrameSource } from "./createStackFrame.ts";
-import download from "./download.ts";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CameraIcon,
-  DiscordIcon,
-  GithubIcon,
-  RefreshIcon,
-  SolidStartIcon,
-  ViewCompiledIcon,
-  ViewOriginalIcon,
-} from "./icons.tsx";
-import "./styles.css";
-
-export function classNames(...classes: (string | boolean | undefined)[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-interface ErrorInfoProps {
-  error: unknown;
-}
-
-function ErrorInfo(props: ErrorInfoProps): JSX.Element {
-  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 as Error).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>
-  );
-}
-
-interface StackFramesContentProps {
-  error: Error;
-  isCompiled: boolean;
-}
-
-function getFileName(source: string): string {
-  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: StackFrameSource) {
-  const line = source.line ? `:${source.line}` : "";
-  const column = source.column ? `:${source.column}` : "";
-  return `${getFileName(source.source)}${line}${column}`;
-}
-
-function CodeFallback(): JSX.Element {
-  return (
-    <div data-start-dev-overlay-stack-frames-code-fallback>
-      <span>Source not available.</span>
-    </div>
-  );
-}
-
-function StackFramesContent(props: StackFramesContentProps) {
-  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<ErrorStackParser.StackFrame>
-        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>
-  );
-}
-
-interface StackFramesProps {
-  error: unknown;
-  isCompiled: boolean;
-}
-
-function StackFrames(props: StackFramesProps) {
-  return (
-    <Show when={props.error instanceof Error && props.error} keyed>
-      {current => <StackFramesContent error={current} isCompiled={props.isCompiled} />}
-    </Show>
-  );
-}
-
-interface DevOverlayDialogProps {
-  errors: any[];
-  resetError: () => void;
-}
-
-const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
-const DISCORD_INVITE = "https://discord.com/invite/solidjs";
-
-export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Element {
-  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<HTMLElement>();
-
-  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 as string}</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>
-  );
-}