@solidjs/start 0.7.0 → 0.7.2

package/shared/HttpHeader.tsx

@@ -1,35 +0,0 @@
-// @refresh skip
-import { onCleanup } from "solid-js";
-import { getRequestEvent, isServer } from "solid-js/web";
-import type { PageEvent } from "../server/types";
-
-export interface HttpHeaderProps {
-  name: string;
-  value: string;
-  append?: boolean;
-}
-
-export const HttpHeader = isServer
-  ? (props: HttpHeaderProps) => {
-    const event = getRequestEvent() as PageEvent;
-
-    if (props.append) event.response.headers.append(props.name, props.value);
-    else event.response.headers.set(props.name, props.value);
-
-    onCleanup(() => {
-      if (event.nativeEvent.handled) 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/shared/HttpStatusCode.tsx

@@ -1,19 +0,0 @@
-// @refresh skip
-import { onCleanup } from "solid-js";
-import { getRequestEvent, isServer } from "solid-js/web";
-import type { PageEvent } from "../server/types";
-
-export interface HttpStatusCodeProps {
-  code: number;
-  text?: string;
-}
-
-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.response.status = 200));
-    return null;
-  }
-  : (_props: HttpStatusCodeProps) => null;

package/shared/clientOnly.tsx

@@ -1,29 +0,0 @@
-// @refresh skip
-import type { Component, ComponentProps, JSX } from "solid-js";
-import { createMemo, createSignal, onMount, sharedConfig, splitProps, untrack } from "solid-js";
-import { isServer } from "solid-js/web";
-
-// not using Suspense
-export default function clientOnly<T extends Component<any>>(
-  fn: () => Promise<{
-    default: T;
-  }>
-) {
-  if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
-
-  const [comp, setComp] = createSignal<T>();
-  fn().then(m => setComp(() => m.default));
-  return (props: ComponentProps<T>) => {
-    let Comp: T | undefined;
-    let m: boolean;
-    const [, rest] = splitProps(props, ["fallback"]);
-    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))
-      )
-    );
-  };
-}

package/shared/dev-overlay/CodeView.tsx

@@ -1,95 +0,0 @@
-// @refresh skip
-import type { BuiltinLanguage, Highlighter } from 'shikiji';
-import { getHighlighterCore, loadWasm } from 'shikiji/core';
-import { createEffect, createResource, type JSX } from 'solid-js';
-
-import url from 'shikiji/onig.wasm?url';
-
-import langJS from 'shikiji/langs/javascript.mjs';
-import langJSX from 'shikiji/langs/jsx.mjs';
-import langTSX from 'shikiji/langs/tsx.mjs';
-import langTS from 'shikiji/langs/typescript.mjs';
-import darkPlus from 'shikiji/themes/dark-plus.mjs';
-
-let HIGHLIGHTER: Highlighter;
-
-async function loadHighlighter() {
-  if (!HIGHLIGHTER) {
-    await loadWasm(await fetch(url))
-    HIGHLIGHTER = await getHighlighterCore({
-      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.classList.add('dev-overlay-error-line');
-        }
-      }
-    }
-  });
-
-  return <div ref={ref} class="dev-overlay-code-view" style={{
-    '--dev-overlay-code-view-start': minLine() + 1,
-  }} />;
-}

package/shared/dev-overlay/DevOverlayDialog.tsx

@@ -1,280 +0,0 @@
-// @refresh skip
-import ErrorStackParser from 'error-stack-parser';
-import * as htmlToImage from 'html-to-image';
-import type { JSX } from 'solid-js';
-import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from 'terracotta';
-import info from '../../package.json';
-import { CodeView } from './CodeView';
-import { createStackFrame, type StackFrameSource } from './createStackFrame';
-import download from './download';
-import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon } from './icons';
-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 {
-  return (
-    <Show when={props.error instanceof Error && props.error} keyed fallback={<span>{(props.error as Error).toString()}</span>}>
-      {(current) => (
-        <span class="dev-overlay-error-info">
-          <span class="dev-overlay-error-info-name">{current.name}</span>
-          <span class="dev-overlay-error-info-message">{current.message}</span>
-        </span>
-      )}
-    </Show>
-  );
-}
-
-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 class="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 class="dev-overlay-stack-frames-content">
-        <div class="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 class="dev-overlay-stack-frames-code-source">{source.source}</span>
-                          <div class="dev-overlay-stack-frames-code-container">
-                            <CodeView fileName={source.source} line={source.line} content={source.content} />
-                          </div>
-                        </>
-                      )}
-                    </Show>
-                  </Suspense>
-                );
-              })()}
-            </ErrorBoundary>
-        </div>
-        <Select<ErrorStackParser.StackFrame>
-          class="dev-overlay-stack-frames"
-          value={selectedFrame()}
-          onChange={setSelectedFrame}
-        >
-          <For each={stackframes}>
-            {(current) => (
-            <ErrorBoundary fallback={(
-              <div class="dev-overlay-stack-frame">
-                <span class="dev-overlay-stack-frame-function">{current.functionName ?? '<anonymous>'}</span>
-                <span class="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 class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">{source.name ?? '<anonymous>'}</span>
-                          <span class="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 class="dev-overlay" isOpen>
-        <div>
-          <DialogOverlay class="dev-overlay-background"/>
-          <DialogPanel ref={setPanel} class="dev-overlay-panel-container">
-            <div class="dev-overlay-panel">
-              <div class="dev-overlay-navbar">
-                <div class="dev-overlay-navbar-left">
-                  <div class="dev-overlay-version">
-                    <div>
-                      <SolidStartIcon title="Solid Start Version" />
-                    </div>
-                    <span>{info.version as string}</span>
-                  </div>
-                  <Show when={props.errors.length > 1}>
-                    <div class="dev-overlay-pagination">
-                      <button class="dev-overlay-button" onClick={goPrev} type="button">
-                        <ArrowLeftIcon title="Go Previous" />
-                      </button>
-                      <div class="dev-overlay-page-counter">
-                        {`${truncated()} of ${props.errors.length}`}
-                      </div>
-                      <button class="dev-overlay-button" onClick={goNext} type="button">
-                        <ArrowRightIcon title="Go Next" />
-                      </button>
-                    </div>
-                  </Show>
-                </div>
-                <div class="dev-overlay-controls">
-                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
-                    <GithubIcon title="Create an issue thread on Github" />
-                  </button>
-                  <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
-                    <DiscordIcon title="Join our Discord Channel" />
-                  </button>
-                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
-                    <CameraIcon title="Capture Error Overlay" />
-                  </button>
-                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
-                    <Show when={isCompiled()} fallback={(
-                      <ViewOriginalIcon title="View Original Source" />
-                    )}>
-                      <ViewCompiledIcon title="View Compiled Source" />
-                    </Show>
-                  </button>
-                  <button class="dev-overlay-button" onClick={props.resetError} type="button">
-                    <RefreshIcon title="Reset Error" />
-                  </button>
-                </div>
-              </div>
-              <Show when={props.errors[truncated() - 1]} keyed>
-                {(current) => (
-                  <div class="dev-overlay-content">
-                    <ErrorInfo error={current} />
-                    <StackFrames error={current} isCompiled={isCompiled()} />
-                  </div>
-                )}
-              </Show>
-            </div>
-          </DialogPanel>
-        </div>
-      </Dialog>
-    </Portal>
-  );
-}

package/shared/dev-overlay/createStackFrame.ts

@@ -1,77 +0,0 @@
-import { createMemo, createResource, type Accessor } from "solid-js";
-import getSourceMap from "./get-source-map";
-
-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/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/shared/dev-overlay/env.d.ts

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

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

@@ -1,35 +0,0 @@
-import { 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);
-}

package/shared/dev-overlay/index.tsx

@@ -1,61 +0,0 @@
-// @refresh skip
-import {
-  ErrorBoundary,
-  Show,
-  createEffect,
-  createSignal,
-  onCleanup,
-  resetErrorBoundaries,
-  type JSX
-} from "solid-js";
-import { HttpStatusCode } from "../HttpStatusCode";
-import clientOnly from "../clientOnly";
-
-export interface DevOverlayProps {
-  children?: JSX.Element;
-}
-
-const DevOverlayDialog = /* #__PURE__ */ clientOnly(() => import("./DevOverlayDialog"));
-
-export function DevOverlay(props: DevOverlayProps): JSX.Element {
-  const [errors, setErrors] = createSignal<unknown[]>([]);
-
-  function resetError() {
-    setErrors([]);
-    resetErrorBoundaries();
-  }
-
-  function pushError(error: unknown) {
-    console.error(error);
-    setErrors(current => [error, ...current]);
-  }
-
-  createEffect(() => {
-    const onErrorEvent = (error: ErrorEvent) => {
-      pushError(error.error);
-    };
-
-    window.addEventListener("error", onErrorEvent);
-
-    onCleanup(() => {
-      window.removeEventListener("error", onErrorEvent);
-    });
-  });
-
-  return (
-    <>
-      <ErrorBoundary
-        fallback={error => {
-          pushError(error);
-          return <HttpStatusCode code={500} />;
-        }}
-      >
-        {props.children}
-      </ErrorBoundary>
-      <Show when={errors().length}>
-        <HttpStatusCode code={500} />
-        <DevOverlayDialog errors={errors()} resetError={resetError} />
-      </Show>
-    </>
-  );
-}

package/shared/index.ts

@@ -1,5 +0,0 @@
-export { GET } from "./GET";
-export { HttpHeader } from "./HttpHeader";
-export { HttpStatusCode } from "./HttpStatusCode";
-export { default as clientOnly } from "./clientOnly";
-