@solidjs/start 1.2.1 → 2.0.0-alpha.1

package/src/server/server-runtime.ts

@@ -0,0 +1,240 @@
+// @ts-ignore - seroval exports issue with NodeNext
+import { join } from "pathe";
+import { deserialize, toJSONAsync } from "seroval";
+import {
+  CustomEventPlugin,
+  DOMExceptionPlugin,
+  EventPlugin,
+  FormDataPlugin,
+  HeadersPlugin,
+  ReadableStreamPlugin,
+  RequestPlugin,
+  ResponsePlugin,
+  URLPlugin,
+  URLSearchParamsPlugin,
+} from "seroval-plugins/web";
+import { type Component } from "solid-js";
+
+class SerovalChunkReader {
+  reader: ReadableStreamDefaultReader<Uint8Array>;
+  buffer: Uint8Array;
+  done: boolean;
+  constructor(stream: ReadableStream<Uint8Array>) {
+    this.reader = stream.getReader();
+    this.buffer = new Uint8Array(0);
+    this.done = false;
+  }
+
+  async readChunk() {
+    // if there's no chunk, read again
+    const chunk = await this.reader.read();
+    if (!chunk.done) {
+      // repopulate the buffer
+      let newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
+      newBuffer.set(this.buffer);
+      newBuffer.set(chunk.value, this.buffer.length);
+      this.buffer = newBuffer;
+    } else {
+      this.done = true;
+    }
+  }
+
+  async next(): Promise<any> {
+    // Check if the buffer is empty
+    if (this.buffer.length === 0) {
+      // if we are already done...
+      if (this.done) {
+        return {
+          done: true,
+          value: undefined,
+        };
+      }
+      // Otherwise, read a new chunk
+      await this.readChunk();
+      return await this.next();
+    }
+    // Read the "byte header"
+    // The byte header tells us how big the expected data is
+    // so we know how much data we should wait before we
+    // deserialize the data
+    const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
+    const bytes = Number.parseInt(head, 16); // ;0x00000000;
+    // Check if the buffer has enough bytes to be parsed
+    while (bytes > this.buffer.length - 12) {
+      // If it's not enough, and the reader is done
+      // then the chunk is invalid.
+      if (this.done) {
+        throw new Error("Malformed server function stream.");
+      }
+      // Otherwise, we read more chunks
+      await this.readChunk();
+    }
+    // Extract the exact chunk as defined by the byte header
+    const partial = new TextDecoder().decode(this.buffer.subarray(12, 12 + bytes));
+    // The rest goes to the buffer
+    this.buffer = this.buffer.subarray(12 + bytes);
+
+    // Deserialize the chunk
+    return {
+      done: false,
+      value: deserialize(partial),
+    };
+  }
+
+  async drain() {
+    while (true) {
+      const result = await this.next();
+      if (result.done) {
+        break;
+      }
+    }
+  }
+}
+
+async function deserializeStream(id: string, response: Response) {
+  if (!response.body) {
+    throw new Error("missing body");
+  }
+  const reader = new SerovalChunkReader(response.body);
+
+  const result = await reader.next();
+
+  if (!result.done) {
+    reader.drain().then(
+      () => {
+        // @ts-ignore
+        delete $R[id];
+      },
+      () => {
+        // no-op
+      },
+    );
+  }
+
+  return result.value;
+}
+
+let INSTANCE = 0;
+
+function createRequest(base: string, id: string, instance: string, options: RequestInit) {
+  return fetch(base, {
+    method: "POST",
+    ...options,
+    headers: {
+      ...options.headers,
+      "X-Server-Id": id,
+      "X-Server-Instance": instance,
+    },
+  });
+}
+
+const plugins = [
+  CustomEventPlugin,
+  DOMExceptionPlugin,
+  EventPlugin,
+  FormDataPlugin,
+  HeadersPlugin,
+  ReadableStreamPlugin,
+  RequestPlugin,
+  ResponsePlugin,
+  URLSearchParamsPlugin,
+  URLPlugin,
+];
+
+async function fetchServerFunction(
+  base: string,
+  id: string,
+  options: Omit<RequestInit, "body">,
+  args: any[],
+) {
+  const instance = `server-fn:${INSTANCE++}`;
+  const response = await (args.length === 0
+    ? createRequest(base, id, instance, options)
+    : args.length === 1 && args[0] instanceof FormData
+      ? createRequest(base, id, instance, { ...options, body: args[0] })
+      : args.length === 1 && args[0] instanceof URLSearchParams
+        ? createRequest(base, id, instance, {
+            ...options,
+            body: args[0],
+            headers: { ...options.headers, "Content-Type": "application/x-www-form-urlencoded" },
+          })
+        : createRequest(base, id, instance, {
+            ...options,
+            body: JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))),
+            headers: { ...options.headers, "Content-Type": "application/json" },
+          }));
+
+  if (
+    response.headers.has("Location") ||
+    response.headers.has("X-Revalidate") ||
+    response.headers.has("X-Single-Flight")
+  ) {
+    if (response.body) {
+      /* @ts-ignore-next-line */
+      response.customBody = () => {
+        return deserializeStream(instance, response);
+      };
+    }
+    return response;
+  }
+
+  const contentType = response.headers.get("Content-Type");
+  let result;
+  if (contentType && contentType.startsWith("text/plain")) {
+    result = await response.text();
+  } else if (contentType && contentType.startsWith("application/json")) {
+    result = await response.json();
+  } else {
+    result = await deserializeStream(instance, response);
+  }
+  if (response.headers.has("X-Error")) {
+    throw result;
+  }
+  return result;
+}
+
+export function createServerReference(id: string) {
+  let baseURL = import.meta.env.BASE_URL ?? "/";
+  if (!baseURL.endsWith("/")) baseURL += "/";
+
+  const fn = (...args: any[]) => fetchServerFunction(`${baseURL}_server`, id, {}, args);
+
+  return new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "url") {
+        return `${baseURL}_server?id=${encodeURIComponent(id)}`;
+      }
+      if (prop === "GET") {
+        return receiver.withOptions({ method: "GET" });
+      }
+      if (prop === "withOptions") {
+        const url = `${baseURL}_server?id=${encodeURIComponent(id)}`;
+        return (options: RequestInit) => {
+          const fn = async (...args: any[]) => {
+            const encodeArgs = options.method && options.method.toUpperCase() === "GET";
+            return fetchServerFunction(
+              encodeArgs
+                ? url +
+                    (args.length
+                      ? `&args=${encodeURIComponent(
+                          JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))),
+                        )}`
+                      : "")
+                : `${baseURL}_server`,
+              id,
+              options,
+              encodeArgs ? [] : args,
+            );
+          };
+          fn.url = url;
+          return fn;
+        };
+      }
+      return (target as any)[prop];
+    },
+  });
+}
+
+export function createClientReference(Component: Component<any>, id: string) {
+  return Component;
+}

package/src/server/spa/StartServer.tsx

@@ -0,0 +1,40 @@
+// @refresh skip
+// @ts-ignore
+import type { Component } from "solid-js";
+import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { getSsrManifest } from "../manifest/ssr-manifest.ts";
+
+import { TopErrorBoundary } from "../../shared/ErrorBoundary.tsx";
+import { useAssets } from "../assets/index.ts";
+import type { DocumentComponentProps, PageEvent } from "../types.ts";
+
+const docType = ssr("<!DOCTYPE html>");
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/start-server
+ */
+export function StartServer(props: { document: Component<DocumentComponentProps> }) {
+  const context = getRequestEvent() as PageEvent;
+  // @ts-ignore
+  const nonce = context.nonce;
+  useAssets(context.assets, nonce);
+
+  return (
+    <NoHydration>
+      {docType as unknown as any}
+      <TopErrorBoundary>
+        <props.document
+          scripts={
+            <>
+              <script
+                type="module"
+                src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}
+              />
+            </>
+          }
+        />
+      </TopErrorBoundary>
+    </NoHydration>
+  );
+}

package/src/server/spa/handler.ts

@@ -0,0 +1,29 @@
+import type { JSX } from "solid-js";
+
+import { createBaseHandler } from "../handler.ts";
+import { getSsrManifest } from "../manifest/ssr-manifest.ts";
+import type { FetchEvent, HandlerOptions, PageEvent } from "../types.ts";
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
+ */
+export function createHandler(
+  fn: (context: PageEvent) => JSX.Element,
+  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions),
+) {
+  return createBaseHandler(createPageEvent, fn, options);
+}
+
+async function createPageEvent(ctx: FetchEvent) {
+  const manifest = getSsrManifest("ssr");
+  const pageEvent: PageEvent = Object.assign(ctx, {
+    manifest: "json" in manifest ? await manifest.json() : {},
+    assets: await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY),
+    routes: [],
+    complete: false,
+    $islands: new Set<string>(),
+  });
+
+  return pageEvent;
+}

package/src/server/spa/index.tsx

@@ -0,0 +1,5 @@
+// @refresh skip
+export { default as lazy } from "../../shared/lazy.ts";
+export * from "../types.ts";
+export { StartServer } from "./StartServer.tsx";
+export { createHandler } from "./handler.ts";

package/src/server/types.ts

@@ -0,0 +1,82 @@
+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) => Promise<any>;
+
+export interface ServerFunctionMeta {
+  id: string;
+}
+
+declare module "solid-js/web" {
+  interface RequestEvent extends FetchEvent {
+    serverOnly?: boolean;
+  }
+}

package/src/server/util.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,52 @@
+// @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

@@ -0,0 +1,8 @@
+// @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

@@ -0,0 +1,42 @@
+// @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

@@ -0,0 +1,27 @@
+// @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

@@ -0,0 +1,44 @@
+// @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

@@ -0,0 +1,92 @@
+// @refresh skip
+import { getSingletonHighlighter, type BuiltinLanguage, type Highlighter } from "shiki";
+import { loadWasm } from "shiki/engine/oniguruma";
+import { createEffect, createResource, type JSX } from "solid-js";
+
+import url from "shiki/onig.wasm?url";
+
+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 darkPlus from "shiki/themes/dark-plus.mjs";
+
+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.classList.add("dev-overlay-error-line");
+        }
+      }
+    }
+  });
+
+  return (
+    <div
+      ref={ref}
+      class="dev-overlay-code-view"
+      style={{
+        "--dev-overlay-code-view-start": minLine() + 1,
+      }}
+    />
+  );
+}