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

package/src/{server/server-functions-handler.ts → fns/handler.ts}

@@ -1,73 +1,27 @@
-import { getServerFnById } from "solidstart:server-fn-manifest";
 import { parseSetCookie } from "cookie-es";
 import { type H3Event, parseCookies } from "h3";
-import { crossSerializeStream, fromJSON, getCrossReferenceHeader } from "seroval";
-import {
-  CustomEventPlugin,
-  DOMExceptionPlugin,
-  EventPlugin,
-  FormDataPlugin,
-  HeadersPlugin,
-  ReadableStreamPlugin,
-  RequestPlugin,
-  ResponsePlugin,
-  URLPlugin,
-  URLSearchParamsPlugin,
-} from "seroval-plugins/web";
 import { sharedConfig } from "solid-js";
 import { renderToString } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
 
-import { getFetchEvent, mergeResponseHeaders } from "./fetchEvent.ts";
-import { createPageEvent } from "./handler.ts";
-import type { FetchEvent, PageEvent } from "./types.ts";
-import { getExpectedRedirectStatus } from "./util.ts";
-
-function createChunk(data: string) {
-  const encodeData = new TextEncoder().encode(data);
-  const bytes = encodeData.length;
-  const baseHex = bytes.toString(16);
-  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex; // 32-bit
-  const head = new TextEncoder().encode(`;0x${totalHex};`);
+import { getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent.ts";
+import { createPageEvent } from "../server/handler.ts";
+import {
+  deserializeFromJSONString,
+  serializeToJSONStream,
+  serializeToJSStream,
+} from "./serialization.ts";
+import {
+  BODY_FORMAT_KEY,
+  BodyFormat,
+  extractBody,
+  getHeadersAndBody,
+} from "./shared.ts";
+import "solid-start:server-fn-manifest";
 
-  const chunk = new Uint8Array(12 + bytes);
-  chunk.set(head);
-  chunk.set(encodeData, 12);
-  return chunk;
-}
-
-function serializeToStream(id: string, value: any) {
-  return new ReadableStream({
-    start(controller) {
-      crossSerializeStream(value, {
-        scopeId: id,
-        plugins: [
-          CustomEventPlugin,
-          DOMExceptionPlugin,
-          EventPlugin,
-          FormDataPlugin,
-          HeadersPlugin,
-          ReadableStreamPlugin,
-          RequestPlugin,
-          ResponsePlugin,
-          URLSearchParamsPlugin,
-          URLPlugin,
-        ],
-        onSerialize(data: string, initial: boolean) {
-          controller.enqueue(
-            createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data),
-          );
-        },
-        onDone() {
-          controller.close();
-        },
-        onError(error: any) {
-          controller.error(error);
-        },
-      });
-    },
-  });
-}
+import { getServerFunction } from "./registration.ts";
+import type { FetchEvent, PageEvent } from "../server/types.ts";
+import { getExpectedRedirectStatus } from "../server/util.ts";
 
 export async function handleServerFunction(h3Event: H3Event) {
   const event = getFetchEvent(h3Event);
@@ -91,59 +45,27 @@ export async function handleServerFunction(h3Event: H3Event) {
     }
   }
 
-  const serverFunction = await getServerFnById(functionId!);
+  const serverFunction = getServerFunction(functionId!);
 
   let parsed: any[] = [];
 
   // grab bound arguments from url when no JS
-  if (!instance || h3Event.method === "GET") {
+  if (!instance || request.method === "GET") {
     const args = url.searchParams.get("args");
     if (args) {
-      const json = JSON.parse(args);
-      (json.t
-        ? (fromJSON(json, {
-            plugins: [
-              CustomEventPlugin,
-              DOMExceptionPlugin,
-              EventPlugin,
-              FormDataPlugin,
-              HeadersPlugin,
-              ReadableStreamPlugin,
-              RequestPlugin,
-              ResponsePlugin,
-              URLSearchParamsPlugin,
-              URLPlugin,
-            ],
-          }) as any)
-        : json
-      ).forEach((arg: any) => {
+      const result = (await deserializeFromJSONString(args)) as any[];
+      for (const arg of result) {
         parsed.push(arg);
-      });
+      }
     }
   }
-  if (h3Event.method === "POST") {
-    const contentType = request.headers.get("content-type");
-
-    if (
-      contentType?.startsWith("multipart/form-data") ||
-      contentType?.startsWith("application/x-www-form-urlencoded")
-    ) {
-      parsed.push(await event.request.formData());
-    } else if (contentType?.startsWith("application/json")) {
-      parsed = fromJSON(await event.request.json(), {
-        plugins: [
-          CustomEventPlugin,
-          DOMExceptionPlugin,
-          EventPlugin,
-          FormDataPlugin,
-          HeadersPlugin,
-          ReadableStreamPlugin,
-          RequestPlugin,
-          ResponsePlugin,
-          URLSearchParamsPlugin,
-          URLPlugin,
-        ],
-      });
+  if (request.method === "POST" && request.body !== null) {
+    const bodyFormat = request.headers.get(BODY_FORMAT_KEY);
+    const decoded = await extractBody("", false, request.clone());
+    if (bodyFormat === BodyFormat.Seroval) {
+      parsed = decoded as any[];
+    } else {
+      parsed.push(decoded);
     }
   }
   try {
@@ -171,16 +93,26 @@ export async function handleServerFunction(h3Event: H3Event) {
           h3Event.res.status = result.status;
         if ((result as any).customBody) {
           result = await (result as any).customBody();
-        } else if (result.body == undefined) result = null;
+        } else if (result.body == null) result = null;
       }
     }
 
     // handle no JS success case
     if (!instance) return handleNoJS(result, request, parsed);
 
-    h3Event.res.headers.set("content-type", "text/javascript");
-
-    return serializeToStream(instance, result);
+    const body = getHeadersAndBody(result);
+    if (body) {
+      return new Response(body.body, {
+        headers: body.headers,
+      });
+    }
+    h3Event.res.headers.set(BODY_FORMAT_KEY, BodyFormat.Seroval);
+    if (import.meta.env.SEROVAL_MODE === "js") {
+      h3Event.res.headers.set("content-type", "text/javascript");
+      return serializeToJSStream(instance, result);
+    }
+    h3Event.res.headers.set("content-type", "text/plain");
+    return serializeToJSONStream(result);
   } catch (x) {
     if (x instanceof Response) {
       if (singleFlight && instance) {
@@ -192,8 +124,8 @@ export async function handleServerFunction(h3Event: H3Event) {
       if ((x as any).status && (!instance || (x as any).status < 300 || (x as any).status >= 400))
         h3Event.res.status = (x as any).status;
       if ((x as any).customBody) {
-        x = (x as any).customBody();
-      } else if ((x as any).body === undefined) x = null;
+        x = await (x as any).customBody();
+      } else if ((x as any).body == null) x = null;
       h3Event.res.headers.set("X-Error", "true");
     } else if (instance) {
       const error = x instanceof Error ? x.message : typeof x === "string" ? x : "true";
@@ -203,8 +135,24 @@ export async function handleServerFunction(h3Event: H3Event) {
       x = handleNoJS(x, request, parsed, true);
     }
     if (instance) {
-      h3Event.res.headers.set("content-type", "text/javascript");
-      return serializeToStream(instance, x);
+      const body = getHeadersAndBody(x);
+      if (body) {
+        const headers = new Headers(body.headers as HeadersInit);
+        const errorHeader = h3Event.res.headers.get("X-Error");
+        if (errorHeader !== null) {
+          headers.set("X-Error", errorHeader);
+        }
+        return new Response(body.body, {
+          headers: body.headers,
+        });
+      }
+      h3Event.res.headers.set(BODY_FORMAT_KEY, BodyFormat.Seroval);
+      if (import.meta.env.SEROVAL_MODE === "js") {
+        h3Event.res.headers.set("content-type", "text/javascript");
+        return serializeToJSStream(instance, x);
+      }
+      h3Event.res.headers.set("content-type", "text/plain");
+      return serializeToJSONStream(x);
     }
     return x;
   }
@@ -249,12 +197,12 @@ function handleNoJS(result: any, request: Request, parsed: any[], thrown?: boole
 }
 
 let App: any;
-function createSingleFlightHeaders(sourceEvent: FetchEvent) {
+export function createSingleFlightHeaders(sourceEvent: FetchEvent) {
   // cookie handling logic is pretty simplistic so this might be imperfect
   // unclear if h3 internals are available on all platforms but we need a way to
   // update request headers on the underlying H3 event.
 
-  const headers = sourceEvent.request.headers;
+  const headers = new Headers(sourceEvent.request.headers);
   const cookies = parseCookies(sourceEvent.nativeEvent);
   const SetCookies = sourceEvent.response.headers.getSetCookie();
   headers.delete("cookie");

package/src/fns/registration.ts

@@ -0,0 +1,19 @@
+const REGISTRATIONS = new Map<string, Function>();
+
+export function registerServerFunction<T extends any[], R>(
+  id: string,
+  callback: (...args: T) => Promise<R>,
+) {
+  REGISTRATIONS.set(id, callback);
+  return callback;
+}
+
+export function getServerFunction<T extends any[], R>(
+  id: string,
+): ((...args: T) => Promise<R>) {
+  const fn = REGISTRATIONS.get(id) as ((...args: T) => Promise<R>) | undefined;
+  if (fn) {
+    return fn;
+  }
+  throw new Error('invalid server function: ' + id);
+}

package/src/fns/serialization.ts

@@ -0,0 +1,250 @@
+import {
+  crossSerializeStream,
+  deserialize,
+  Feature,
+  fromCrossJSON,
+  getCrossReferenceHeader,
+  type SerovalNode,
+  toCrossJSONStream,
+} from "seroval";
+import {
+  AbortSignalPlugin,
+  CustomEventPlugin,
+  DOMExceptionPlugin,
+  EventPlugin,
+  FormDataPlugin,
+  HeadersPlugin,
+  ReadableStreamPlugin,
+  RequestPlugin,
+  ResponsePlugin,
+  URLPlugin,
+  URLSearchParamsPlugin,
+} from "seroval-plugins/web";
+
+// TODO(Alexis): if we can, allow providing an option to extend these.
+const DEFAULT_PLUGINS = [
+  AbortSignalPlugin,
+  CustomEventPlugin,
+  DOMExceptionPlugin,
+  EventPlugin,
+  FormDataPlugin,
+  HeadersPlugin,
+  ReadableStreamPlugin,
+  RequestPlugin,
+  ResponsePlugin,
+  URLSearchParamsPlugin,
+  URLPlugin,
+];
+const MAX_SERIALIZATION_DEPTH_LIMIT = 64;
+const DISABLED_FEATURES = Feature.RegExp;
+
+/**
+ * Alexis:
+ *
+ * A "chunk" is a piece of data emitted by the streaming serializer.
+ * Each chunk is represented by a 32-bit value (encoded in hexadecimal),
+ * followed by the encoded string (8-bit representation). This format
+ * is important so we know how much of the chunk being streamed we
+ * are expecting before parsing the entire string data.
+ *
+ * This is sort of a bootleg "multipart/form-data" except it's bad at
+ * handling File/Blob LOL
+ *
+ * The format is as follows:
+ * ;0xFFFFFFFF;<string data>
+ */
+function createChunk(data: string): Uint8Array {
+  const encodeData = new TextEncoder().encode(data);
+  const bytes = encodeData.length;
+  const baseHex = bytes.toString(16);
+  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex; // 32-bit
+  const head = new TextEncoder().encode(`;0x${totalHex};`);
+
+  const chunk = new Uint8Array(12 + bytes);
+  chunk.set(head);
+  chunk.set(encodeData, 12);
+  return chunk;
+}
+
+export function serializeToJSStream(id: string, value: any) {
+  return new ReadableStream({
+    start(controller) {
+      crossSerializeStream(value, {
+        scopeId: id,
+        plugins: DEFAULT_PLUGINS,
+        onSerialize(data: string, initial: boolean) {
+          controller.enqueue(
+            createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data),
+          );
+        },
+        onDone() {
+          controller.close();
+        },
+        onError(error: any) {
+          controller.error(error);
+        },
+      });
+    },
+  });
+}
+
+export function serializeToJSONStream(value: any) {
+  return new ReadableStream({
+    start(controller) {
+      toCrossJSONStream(value, {
+        disabledFeatures: DISABLED_FEATURES,
+        depthLimit: MAX_SERIALIZATION_DEPTH_LIMIT,
+        plugins: DEFAULT_PLUGINS,
+        onParse(node) {
+          controller.enqueue(createChunk(JSON.stringify(node)));
+        },
+        onDone() {
+          controller.close();
+        },
+        onError(error) {
+          controller.error(error);
+        },
+      });
+    },
+  });
+}
+
+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
+      const 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<{ done: true; value: undefined } | { done: false; value: string }> {
+    // 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;
+    if (Number.isNaN(bytes)) {
+      throw new Error("Malformed server function stream.");
+    }
+    // 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: partial,
+    };
+  }
+
+  async drain(interpret: (chunk: string) => void) {
+    while (true) {
+      const result = await this.next();
+      if (result.done) {
+        break;
+      } else {
+        interpret(result.value);
+      }
+    }
+  }
+}
+
+export async function serializeToJSONString(value: any) {
+  const response = new Response(serializeToJSONStream(value));
+  return await response.text();
+}
+
+export async function deserializeFromJSONString(json: string) {
+  const blob = new Response(json);
+  return await deserializeJSONStream(blob);
+}
+
+export async function deserializeJSONStream(response: Response | Request) {
+  if (!response.body) {
+    throw new Error("missing body");
+  }
+  const reader = new SerovalChunkReader(response.body);
+  const result = await reader.next();
+  if (!result.done) {
+    const refs = new Map();
+
+    function interpretChunk(chunk: string): unknown {
+      const value = fromCrossJSON(JSON.parse(chunk) as SerovalNode, {
+        refs,
+        disabledFeatures: DISABLED_FEATURES,
+        depthLimit: MAX_SERIALIZATION_DEPTH_LIMIT,
+        plugins: DEFAULT_PLUGINS,
+      });
+      return value;
+    }
+
+    void reader.drain(interpretChunk);
+
+    return interpretChunk(result.value);
+  }
+  return undefined;
+}
+
+export async function deserializeJSStream(id: string, response: Request | 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(deserialize).then(
+      () => {
+        // @ts-ignore
+        delete $R[id];
+      },
+      () => {
+        // no-op
+      },
+    );
+    return deserialize(result.value);
+  }
+  return undefined;
+}

package/src/{server/server-fns-runtime.ts → fns/server.ts}

@@ -1,7 +1,22 @@
 import { getRequestEvent } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
+import { registerServerFunction } from "./registration.ts";
 
-export function createServerReference(fn: Function, id: string) {
+interface Registration<T extends any[], R> {
+  id: string;
+  fn: (...args: T) => Promise<R>;
+}
+
+export function createServerReference<T extends any[], R>(
+  id: string,
+  fn: (...args: T) => Promise<R>,
+) {
+  const registration: Registration<T, R> = { id, fn };
+  registerServerFunction(id, fn);
+  return registration;
+}
+
+export function cloneServerReference<T extends any[], R>({ id, fn }: Registration<T, R>) {
   if (typeof fn !== "function")
     throw new Error("Export from a 'use server' module must be a function");
   let baseURL = import.meta.env.BASE_URL ?? "/";
@@ -24,7 +39,7 @@ export function createServerReference(fn: Function, id: string) {
       };
       evt.serverOnly = true;
       return provideRequestEvent(evt, () => {
-        return fn.apply(thisArg, args);
+        return fn.apply(thisArg, args as T);
       });
     },
   });

package/src/fns/shared.ts

@@ -0,0 +1,116 @@
+import { deserializeJSONStream, deserializeJSStream } from "./serialization.ts";
+
+export const BODY_FORMAT_KEY = "X-Start-Type";
+
+export const BODY_FORMAL_FILE = "__START__";
+
+export const enum BodyFormat {
+  Seroval = "0",
+  String = "1",
+  FormData = "2",
+  URLSearchParams = "3",
+  Blob = "4",
+  File = "5",
+  ArrayBuffer = "6",
+  Uint8Array = "7",
+}
+
+export function getHeadersAndBody(body: any):
+  | {
+      headers?: HeadersInit;
+      body: BodyInit;
+    }
+  | undefined {
+  switch (true) {
+    case typeof body === "string":
+      return {
+        headers: {
+          "Content-Type": "text/plain",
+          [BODY_FORMAT_KEY]: BodyFormat.String,
+        },
+        body,
+      };
+    case body instanceof FormData:
+      return {
+        headers: {
+          [BODY_FORMAT_KEY]: BodyFormat.FormData,
+        },
+        body,
+      };
+    case body instanceof URLSearchParams:
+      return {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          [BODY_FORMAT_KEY]: BodyFormat.URLSearchParams,
+        },
+        body,
+      };
+    case body instanceof File: {
+      const formData = new FormData();
+      formData.append(BODY_FORMAL_FILE, body, body.name);
+      return {
+        headers: {
+          [BODY_FORMAT_KEY]: BodyFormat.File,
+        },
+        body: formData,
+      };
+    }
+    case body instanceof Blob:
+      return {
+        headers: {
+          [BODY_FORMAT_KEY]: BodyFormat.Blob,
+        },
+        body,
+      };
+    case body instanceof ArrayBuffer:
+      return {
+        headers: {
+          [BODY_FORMAT_KEY]: BodyFormat.ArrayBuffer,
+        },
+        body,
+      };
+    case body instanceof Uint8Array:
+      return {
+        headers: {
+          [BODY_FORMAT_KEY]: BodyFormat.Uint8Array,
+        },
+        body: new Uint8Array(body),
+      };
+    default:
+      return undefined;
+  }
+}
+
+export async function extractBody(instance: string, client: boolean, source: Request | Response) {
+  const contentType = source.headers.get("content-type");
+  const startType = source.headers.get(BODY_FORMAT_KEY);
+  const clone = source.clone();
+
+  switch (true) {
+    case startType === BodyFormat.Seroval:
+      if (client && import.meta.env.SEROVAL_MODE === "js") {
+        return await deserializeJSStream(instance, clone);
+      }
+      return await deserializeJSONStream(clone);
+    case startType === BodyFormat.String:
+      return await clone.text();
+    case startType === BodyFormat.File: {
+      const formData = await clone.formData();
+      return formData.get(BODY_FORMAL_FILE);
+    }
+    case startType === BodyFormat.FormData:
+    case contentType?.startsWith("multipart/form-data"):
+      return await clone.formData();
+    case startType === BodyFormat.URLSearchParams:
+    case contentType?.startsWith("application/x-www-form-urlencoded"):
+      return new URLSearchParams(await clone.text());
+    case startType === BodyFormat.Blob:
+      return await clone.blob();
+    case startType === BodyFormat.ArrayBuffer:
+      return await clone.arrayBuffer();
+    case startType === BodyFormat.Uint8Array:
+      return new Uint8Array(await clone.arrayBuffer());
+  }
+
+  return undefined;
+}

package/src/middleware/index.ts

@@ -36,12 +36,32 @@ function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware): Middlewar
 
     const fetchEvent = getFetchEvent(h3Event);
     const mwResponse = await onBeforeResponse(fetchEvent, {
-      body: (resp as any)?.body,
+      body: resp,
     });
     if (mwResponse) return mwResponse;
   };
 }
 
+/**
+ * Creates middleware for handling requests and responses.
+ *
+ * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+/**
+ * Creates request/response middlewares via H3.
+ *
+ * Accepts an array of H3 {@link Middleware}
+ *
+ * @tip To run your middleware before response, `await next()` in your function block.
+ *@example
+ * const middleware = createMiddleware([
+ *   async (event, next) => {
+ *     const resp = await next();
+ *     if (resp instanceof Response) return resp;
+ *     return new Response("Not found", { status: 404 });
+ *   },
+ * ]);
+ *
+ */
 export function createMiddleware(
   args:
     | {