@solidjs/start 2.0.0-beta.0 → 2.0.0-beta.2

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>
-  );
-}

package/src/shared/dev-overlay/createStackFrame.ts

@@ -1,74 +0,0 @@
-import { type Accessor, createMemo, createResource } from "solid-js";
-import getSourceMap from "./get-source-map.ts";
-
-export interface StackFrameSource {
-  content: string;
-  source: string;
-  name?: string;
-  line: number;
-  column: number;
-}
-
-function getActualFileSource(path: string): string {
-  if (path.startsWith("file://")) {
-    return "/_build/@fs" + path.substring("file://".length);
-  }
-  return path;
-}
-
-export function createStackFrame(stackframe: StackFrame, isCompiled: () => boolean) {
-  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),
-      } as StackFrameSource;
-    }
-
-    return {
-      source: source.fileName,
-      line: source.line,
-      column: source.column,
-      name: source.functionName,
-      content,
-    } as StackFrameSource;
-  });
-
-  return info as Accessor<StackFrameSource>;
-}

package/src/shared/dev-overlay/download.ts

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

package/src/shared/dev-overlay/env.d.ts

@@ -1,4 +0,0 @@
-declare module "*.json" {
-  const data: Record<string, unknown>;
-  export default data;
-}

package/src/shared/dev-overlay/get-source-map.ts

@@ -1,33 +0,0 @@
-import { type RawSourceMap, 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: string,
-  content: string,
-): Promise<SourceMapConsumer | null> {
-  const lines = content.split("\n");
-  let sourceMapUrl: string | undefined;
-  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: RawSourceMap = await response.json();
-  return new SourceMapConsumer(rawSourceMap);
-}