@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/src/server/server-functions-handler.ts

@@ -0,0 +1,364 @@
+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};`);
+
+	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);
+				},
+			});
+		},
+	});
+}
+
+export async function handleServerFunction(h3Event: H3Event) {
+	const event = getFetchEvent(h3Event);
+	const request = event.request;
+
+	const serverReference = request.headers.get("X-Server-Id");
+	const instance = request.headers.get("X-Server-Instance");
+	const singleFlight = request.headers.has("X-Single-Flight");
+	const url = new URL(request.url);
+	let functionId: string | undefined | null;
+	if (serverReference) {
+		// invariant(typeof serverReference === "string", "Invalid server function");
+		[functionId] = serverReference.split("#");
+	} else {
+		functionId = url.searchParams.get("id");
+
+		if (!functionId) {
+			return process.env.NODE_ENV === "development"
+				? new Response("Server function not found", { status: 404 })
+				: new Response(null, { status: 404 });
+		}
+	}
+
+	const serverFunction = await getServerFnById(functionId!);
+
+	let parsed: any[] = [];
+
+	// grab bound arguments from url when no JS
+	if (!instance || h3Event.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) => {
+				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,
+				],
+			});
+		}
+	}
+	try {
+		let result = await provideRequestEvent(event, async () => {
+			/* @ts-expect-error */
+			sharedConfig.context = { event };
+			event.locals.serverFunctionMeta = {
+				id: functionId
+			};
+			return serverFunction(...parsed);
+		});
+
+		if (singleFlight && instance) {
+			result = await handleSingleFlight(event, result);
+		}
+
+		// handle responses
+		if (result instanceof Response) {
+			if (result.headers && result.headers.has("X-Content-Raw")) return result;
+			if (instance) {
+				// forward headers
+				if (result.headers) mergeResponseHeaders(h3Event, result.headers);
+				// forward non-redirect statuses
+				if (result.status && (result.status < 300 || result.status >= 400))
+					h3Event.res.status = result.status;
+				if ((result as any).customBody) {
+					result = await (result as any).customBody();
+				} else if (result.body == undefined) 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);
+	} catch (x) {
+		if (x instanceof Response) {
+			if (singleFlight && instance) {
+				x = await handleSingleFlight(event, x);
+			}
+			// forward headers
+			if ((x as any).headers) mergeResponseHeaders(h3Event, (x as any).headers);
+			// forward non-redirect statuses
+			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;
+			h3Event.res.headers.set("X-Error", "true");
+		} else if (instance) {
+			const error =
+				x instanceof Error ? x.message : typeof x === "string" ? x : "true";
+
+			h3Event.res.headers.set("X-Error", error.replace(/[\r\n]+/g, ""));
+		} else {
+			x = handleNoJS(x, request, parsed, true);
+		}
+		if (instance) {
+			h3Event.res.headers.set("content-type", "text/javascript");
+			return serializeToStream(instance, x);
+		}
+		return x;
+	}
+}
+
+function handleNoJS(
+	result: any,
+	request: Request,
+	parsed: any[],
+	thrown?: boolean,
+) {
+	const url = new URL(request.url);
+	const isError = result instanceof Error;
+	let statusCode = 302;
+	let headers: Headers;
+	if (result instanceof Response) {
+		headers = new Headers(result.headers);
+		if (result.headers.has("Location")) {
+			headers.set(
+				`Location`,
+				new URL(
+					result.headers.get("Location")!,
+					url.origin + import.meta.env.BASE_URL,
+				).toString(),
+			);
+			statusCode = getExpectedRedirectStatus(result);
+		}
+	} else
+		headers = new Headers({
+			Location: new URL(request.headers.get("referer")!).toString(),
+		});
+	if (result) {
+		headers.append(
+			"Set-Cookie",
+			`flash=${encodeURIComponent(
+				JSON.stringify({
+					url: url.pathname + url.search,
+					result: isError ? result.message : result,
+					thrown: thrown,
+					error: isError,
+					input: [
+						...parsed.slice(0, -1),
+						[...parsed[parsed.length - 1].entries()],
+					],
+				}),
+			)}; Secure; HttpOnly;`,
+		);
+	}
+	return new Response(null, {
+		status: statusCode,
+		headers,
+	});
+}
+
+let App: any;
+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 cookies = parseCookies(sourceEvent.nativeEvent);
+	const SetCookies = sourceEvent.response.headers.getSetCookie();
+	headers.delete("cookie");
+	// let useH3Internals = false;
+	// if (sourceEvent.nativeEvent.node?.req) {
+	// 	useH3Internals = true;
+	// 	sourceEvent.nativeEvent.node.req.headers.cookie = "";
+	// }
+	SetCookies.forEach((cookie) => {
+		if (!cookie) return;
+		const { maxAge, expires, name, value } = parseSetCookie(cookie);
+		if (maxAge != null && maxAge <= 0) {
+			delete cookies[name];
+			return;
+		}
+		if (expires != null && expires.getTime() <= Date.now()) {
+			delete cookies[name];
+			return;
+		}
+		cookies[name] = value;
+	});
+	Object.entries(cookies).forEach(([key, value]) => {
+		headers.append("cookie", `${key}=${value}`);
+		// useH3Internals &&
+		// 	(sourceEvent.nativeEvent.node.req.headers.cookie += `${key}=${value};`);
+	});
+
+	return headers;
+}
+async function handleSingleFlight(
+	sourceEvent: FetchEvent,
+	result: any,
+): Promise<Response> {
+	let revalidate: string[];
+	let url = new URL(sourceEvent.request.headers.get("referer")!).toString();
+	if (result instanceof Response) {
+		if (result.headers.has("X-Revalidate"))
+			revalidate = result.headers.get("X-Revalidate")!.split(",");
+		if (result.headers.has("Location"))
+			url = new URL(
+				result.headers.get("Location")!,
+				new URL(sourceEvent.request.url).origin +
+					import.meta.env.BASE_URL,
+			).toString();
+	}
+	const event = { ...sourceEvent } as PageEvent;
+	event.request = new Request(url, {
+		headers: createSingleFlightHeaders(sourceEvent),
+	});
+	return await provideRequestEvent(event, async () => {
+		await createPageEvent(event);
+		App || (App = (await import("solid-start:app")).default);
+		/* @ts-expect-error */
+		event.router.dataOnly = revalidate || true;
+		/* @ts-expect-error */
+		event.router.previousUrl = sourceEvent.request.headers.get("referer");
+		try {
+			renderToString(() => {
+				/* @ts-expect-error */
+				sharedConfig.context.event = event;
+				App();
+			});
+		} catch (e) {
+			console.log(e);
+		}
+
+		/* @ts-expect-error */
+		const body = event.router.data;
+		if (!body) return result;
+		let containsKey = false;
+		for (const key in body) {
+			if (body[key] === undefined) delete body[key];
+			else containsKey = true;
+		}
+		if (!containsKey) return result;
+		if (!(result instanceof Response)) {
+			body["_$value"] = result;
+			result = new Response(null, { status: 200 });
+		} else if ((result as any).customBody) {
+			body["_$value"] = (result as any).customBody();
+		}
+		result.customBody = () => body;
+		result.headers.set("X-Single-Flight", "true");
+		return result;
+	});
+}

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";