@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/src/server/handler.ts

@@ -0,0 +1,250 @@
+import middleware from "solid-start:middleware";
+import { defineHandler, getCookie, H3, type H3Event, redirect, setCookie } from "h3";
+import { join } from "pathe";
+import type { JSX } from "solid-js";
+import { sharedConfig } from "solid-js";
+import { getRequestEvent, renderToStream, renderToString } from "solid-js/web";
+
+import { createRoutes } from "../router.tsx";
+import { decorateHandler, decorateMiddleware } from "./fetchEvent.ts";
+import { getSsrManifest } from "./manifest/ssr-manifest.ts";
+import { matchAPIRoute } from "./routes.ts";
+import { handleServerFunction } from "./server-functions-handler.ts";
+import type {
+	APIEvent,
+	FetchEvent,
+	HandlerOptions,
+	PageEvent,
+} from "./types.ts";
+import { getExpectedRedirectStatus } from "./util.ts";
+
+const SERVER_FN_BASE = "/_server";
+
+export function createBaseHandler(
+	createPageEvent: (e: FetchEvent) => Promise<PageEvent>,
+	fn: (context: PageEvent) => JSX.Element,
+	options:
+		| HandlerOptions
+		| ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
+) {
+	const handler = defineHandler({
+		middleware: middleware.length ? middleware.map(decorateMiddleware): undefined,
+		handler: decorateHandler(async (e: H3Event) => {
+			const event = getRequestEvent()!;
+			const url = new URL(event.request.url);
+			const pathname = url.pathname;
+
+			const serverFunctionTest = join(import.meta.env.BASE_URL, SERVER_FN_BASE);
+			if (pathname.startsWith(serverFunctionTest)) {
+				const serverFnResponse = await handleServerFunction(e);
+
+        if (serverFnResponse instanceof Response)
+          return produceResponseWithEventHeaders(serverFnResponse);
+
+				return new Response(serverFnResponse as any, {
+					headers: e.res.headers,
+				});
+			}
+
+			const match = matchAPIRoute(pathname, event.request.method);
+			if (match) {
+				const mod = await match.handler.import();
+				const fn =
+					event.request.method === "HEAD"
+						? mod["HEAD"] || mod["GET"]
+						: mod[event.request.method];
+				(event as APIEvent).params = match.params || {};
+				// @ts-expect-error
+				sharedConfig.context = { event };
+				const res = await fn!(event);
+        if (res !== undefined) {
+          if(res instanceof Response) return produceResponseWithEventHeaders(res)
+
+          return res;
+        }
+				if (event.request.method !== "GET") {
+					throw new Error(
+						`API handler for ${event.request.method} "${event.request.url}" did not return a response.`,
+					);
+				}
+				if (!match.isPage) return;
+			}
+
+			const context = await createPageEvent(event);
+
+			const resolvedOptions =
+				typeof options === "function" ? await options(context) : { ...options };
+			const mode = resolvedOptions.mode || "stream";
+			if (resolvedOptions.nonce) context.nonce = resolvedOptions.nonce;
+
+			if (mode === "sync" || !import.meta.env.START_SSR) {
+				const html = renderToString(() => {
+					(sharedConfig.context as any).event = context;
+					return fn(context);
+				});
+				context.complete = true;
+
+				if (context.response && context.response.headers.get("Location")) {
+          const status = getExpectedRedirectStatus(context.response);
+          return redirect(context.response.headers.get("Location")!, status);
+        }
+
+				return html;
+			}
+
+			if (resolvedOptions.onCompleteAll) {
+        const og = resolvedOptions.onCompleteAll;
+        resolvedOptions.onCompleteAll = options => {
+          handleStreamCompleteRedirect(context)(options);
+          og(options);
+        };
+      } else resolvedOptions.onCompleteAll = handleStreamCompleteRedirect(context);
+      if (resolvedOptions.onCompleteShell) {
+        const og = resolvedOptions.onCompleteShell;
+        resolvedOptions.onCompleteShell = options => {
+          handleShellCompleteRedirect(context, e)();
+          og(options);
+        };
+      } else resolvedOptions.onCompleteShell = handleShellCompleteRedirect(context, e);
+
+			const _stream = renderToStream(() => {
+				(sharedConfig.context as any).event = context;
+				return fn(context);
+			}, resolvedOptions);
+      const stream = _stream as typeof _stream & PromiseLike<string>; // stream has a hidden 'then' method
+
+      if (context.response && context.response.headers.get("Location")) {
+        const status = getExpectedRedirectStatus(context.response);
+        return redirect(context.response.headers.get("Location")!, status);
+      }
+
+			if (mode === "async") return await stream
+
+      delete (stream as any).then;
+
+      // using TransformStream in dev can cause solid-start-dev-server to crash
+      // when stream is cancelled
+      if(globalThis.USING_SOLID_START_DEV_SERVER) return stream
+
+      // returning stream directly breaks cloudflare workers
+      const { writable, readable } = new TransformStream();
+      stream.pipeTo(writable);
+      return readable
+		}),
+	});
+
+	const app = new H3();
+
+  app.use(handler);
+
+	return app;
+}
+
+export function createHandler(
+	fn: (context: PageEvent) => JSX.Element,
+	options:
+		| HandlerOptions
+		| ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
+) {
+	return createBaseHandler(createPageEvent, fn, options);
+}
+
+export async function createPageEvent(ctx: FetchEvent) {
+	ctx.response.headers.set("Content-Type", "text/html");
+	// const prevPath = ctx.request.headers.get("x-solid-referrer");
+	// const mutation = ctx.request.headers.get("x-solid-mutation") === "true";
+	const manifest = getSsrManifest(import.meta.env.SSR && import.meta.env.DEV ? "ssr": "client");
+
+	// Handle Vite build.cssCodeSplit
+	// When build.cssCodeSplit is false, a single CSS file is generated with the key style.css
+	const mergedCSS = import.meta.env.PROD ? await manifest.getAssets('style.css'): [];
+
+	const assets = [
+    ...mergedCSS,
+    ...(await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY)),
+    ...(await manifest.getAssets(import.meta.env.START_APP_ENTRY)),
+    // ...(import.meta.env.START_ISLANDS
+    //   ? (await serverManifest.inputs[serverManifest.handler]!.assets()).filter(
+    //       s => (s as any).attrs.rel !== "modulepreload"
+    //     )
+    //   : [])
+  ];
+	const pageEvent: PageEvent = Object.assign(ctx, {
+		assets,
+		router: {
+			submission: initFromFlash(ctx) as any,
+		},
+		routes: createRoutes(),
+		// prevUrl: prevPath || "",
+		// mutation: mutation,
+		// $type: FETCH_EVENT,
+		complete: false,
+		$islands: new Set<string>(),
+	});
+
+	return pageEvent;
+}
+
+function initFromFlash(ctx: FetchEvent) {
+	const flash = getCookie(ctx.nativeEvent, "flash");
+	if (!flash) return;
+	try {
+		const param = JSON.parse(flash);
+		if (!param || !param.result) return;
+		const input = [
+			...param.input.slice(0, -1),
+			new Map(param.input[param.input.length - 1]),
+		];
+		const result = param.error ? new Error(param.result) : param.result;
+		return {
+			input,
+			url: param.url,
+			pending: false,
+			result: param.thrown ? undefined : result,
+			error: param.thrown ? result : undefined,
+		};
+	} catch (e) {
+		console.error(e);
+	} finally {
+		setCookie(ctx.nativeEvent, "flash", "", { maxAge: 0 });
+	}
+}
+
+function handleShellCompleteRedirect(context: PageEvent, e: H3Event) {
+  return () => {
+    if (context.response && context.response.headers.get("Location")) {
+      const status = getExpectedRedirectStatus(context.response);
+      e.res.status = status
+      e.res.headers.set("Location", context.response.headers.get("Location")!);
+    }
+  };
+}
+
+function handleStreamCompleteRedirect(context: PageEvent) {
+  return ({ write }: { write: (html: string) => void }) => {
+    context.complete = true;
+    const to = context.response && context.response.headers.get("Location");
+    to && write(`<script>window.location="${to}"</script>`);
+  };
+}
+
+function produceResponseWithEventHeaders(res: Response) {
+  const event = getRequestEvent()!;
+
+  let ret = res;
+
+  // Response.redirect returns an immutable value, so we clone on any redirect just in case
+  if(300 <= res.status && res.status < 400) {
+    ret = new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: Object.fromEntries(res.headers.entries())
+    });
+  }
+
+  for(const [name, value] of event.response.headers) {
+    ret.headers.set(name, value);
+  }
+
+  return ret
+}

package/src/server/index.tsx

@@ -0,0 +1,16 @@
+export { default as lazy } from "../shared/lazy.ts";
+export { getServerFunctionMeta } from "../shared/serverFunction.ts";
+export { StartServer } from "./StartServer.tsx";
+export { createHandler } from "./handler.ts";
+
+/**
+ * Checks if user has set a redirect status in the response.
+ * If not, falls back to the 302 (temporary redirect)
+ */
+// export function getExpectedRedirectStatus(response: ResponseStub): number {
+//   if (response.status && validRedirectStatuses.has(response.status)) {
+//     return response.status;
+//   }
+
+//   return 302;
+// }

package/src/server/manifest/client-manifest.ts

@@ -0,0 +1,8 @@
+import { getClientDevManifest } from "./dev-client-manifest.ts";
+import { getClientProdManifest } from "./prod-client-manifest.ts";
+
+export function getClientManifest() {
+	return import.meta.env.DEV ? getClientDevManifest() : getClientProdManifest();
+}
+
+export { getClientManifest as getManifest };

package/src/server/manifest/dev-client-manifest.ts

@@ -0,0 +1,19 @@
+import { join } from "pathe";
+
+export function getClientDevManifest() {
+  return {
+    import(id) {
+      return import(/* @vite-ignore */ join("/", id))
+    },
+    async getAssets(id) {
+      const assetsPath = `/@manifest/client/${Date.now()}/assets?id=${id}`;
+
+      const assets = (await import(/* @vite-ignore */ assetsPath)).default;
+
+      return await Promise.all(assets.map(async (v: any) => ({
+        ...v,
+        children: await v.children()
+      })));
+    },
+  } satisfies StartManifest & { import(id: string): Promise<any> };
+}

package/src/server/manifest/dev-ssr-manifest.ts

@@ -0,0 +1,21 @@
+import { join, normalize } from "pathe";
+
+export function getSsrDevManifest(environment: "client" | "ssr") {
+  return {
+    path: (id: string) => normalize(join(import.meta.env.BASE_URL, id)),
+    async getAssets(id) {
+      const assetsPath = `/@manifest/${environment}/${Date.now()}/assets?id=${id}`;
+
+      const assets = (await import(/* @vite-ignore */ assetsPath)).default;
+
+      return await Promise.all(assets.map(async (v: any) => ({
+        ...v,
+        children: await v.children()
+      })));
+    },
+  } satisfies StartManifest & {
+		path(id: string): string;
+	};
+}
+
+export { getSsrDevManifest as getSsrManifest };

package/src/server/manifest/prod-client-manifest.ts

@@ -0,0 +1,18 @@
+export function getClientProdManifest() {
+  return {
+    import(id) {
+      // @ts-ignore
+      return import(/* @vite-ignore */ window.manifest[id].output)
+    },
+    async getAssets(id) {
+      if (id.startsWith("./")) id = id.slice(2);
+
+      // @ts-ignore
+      return window.manifest[id]?.assets ?? []
+    },
+    async json() {
+      // @ts-ignore
+      return window.manifest
+    },
+  } satisfies StartManifest & { json(): Promise<Record<string, any>>, import(id: string): Promise<any>; }
+}

package/src/server/manifest/prod-ssr-manifest.ts

@@ -0,0 +1,125 @@
+import { clientViteManifest } from "solid-start:client-vite-manifest";
+import { join } from "pathe";
+import { Manifest } from "vite";
+import type { Asset } from "../assets/render.tsx";
+
+// Only reads from client manifest atm, might need server support for islands
+export function getSsrProdManifest() {
+	const viteManifest = clientViteManifest;
+	return {
+		path(id: string) {
+      if (id.startsWith("./")) id = id.slice(2);
+
+			const viteManifestEntry =
+				clientViteManifest[id /*import.meta.env.START_CLIENT_ENTRY*/];
+			if (!viteManifestEntry)
+				throw new Error(`No entry found in vite manifest for '${id}'`);
+
+			return join("/", viteManifestEntry.file);
+		},
+		async getAssets(id) {
+      if (id.startsWith("./")) id = id.slice(2);
+
+			return createHtmlTagsForAssets(
+				findAssetsInViteManifest(clientViteManifest, id),
+			);
+		},
+		async json() {
+			const json: Record<string, any> = {};
+
+			const entryKeys = Object.keys(viteManifest)
+				.filter((id) => viteManifest[id]?.isEntry || viteManifest[id]?.isDynamicEntry)
+				.map((id) => id);
+
+			for (const entryKey of entryKeys) {
+				json[entryKey] = {
+					output: join("/", viteManifest[entryKey]!.file),
+					assets: await this.getAssets(entryKey),
+				};
+			}
+
+			return json;
+		},
+	} satisfies StartManifest & {
+		json(): Promise<Record<string, any>>;
+		path(id: string): string;
+	};
+}
+
+function createHtmlTagsForAssets(assets: string[]) {
+	return assets
+		.filter(
+			(asset) =>
+				asset.endsWith(".css") ||
+				asset.endsWith(".js") ||
+				asset.endsWith(".ts") ||
+				asset.endsWith(".mjs"),
+		)
+		.map<Asset>((asset) => ({
+			tag: "link",
+			attrs: {
+				href: '/' + asset,
+				key: asset,
+				...(asset.endsWith(".css")
+					? { rel: "stylesheet" }
+					: { rel: "modulepreload" }),
+			},
+		}));
+}
+
+const entryId = import.meta.env.START_CLIENT_ENTRY.slice(2);
+let entryImports: string[] | undefined = undefined;
+
+function findAssetsInViteManifest(
+	manifest: Manifest,
+	id: string,
+	assetMap = new Map(),
+	stack: string[] = [],
+) {
+	if (stack.includes(id)) {
+		return [];
+	}
+
+	const cached = assetMap.get(id);
+	if (cached) {
+		return cached;
+	}
+	const chunk = manifest[id];
+	if (!chunk) {
+		return [];
+	}
+
+	if (!entryImports) {
+		entryImports = [
+			entryId,
+			...(manifest[entryId]?.imports ?? [])
+		];
+	}
+
+	// Only include entry imports, if we are specifically crawling the entry
+	// Chunks (e.g. routes) that import something from entry, should not render entry css redundantly
+	const excludeEntryImports = id !== entryId;
+
+	const assets = chunk.css?.filter(Boolean) || [];
+	if (chunk.imports) {
+		stack.push(id);
+		for (let i = 0, l = chunk.imports.length; i < l; i++) {
+			const importId = chunk.imports[i];
+			if (!importId || (excludeEntryImports && entryImports.includes(importId))) continue;
+			assets.push(
+				...findAssetsInViteManifest(
+					manifest,
+					importId,
+					assetMap,
+					stack,
+				),
+			);
+		}
+		stack.pop();
+	}
+	assets.push(chunk.file);
+	const all = Array.from(new Set(assets));
+	assetMap.set(id, all);
+
+	return all;
+}

package/src/server/manifest/ssr-manifest.ts

@@ -0,0 +1,8 @@
+import { getSsrDevManifest } from "./dev-ssr-manifest.ts";
+import { getSsrProdManifest } from "./prod-ssr-manifest.ts";
+
+export function getSsrManifest(target: "client" | "ssr"): ReturnType<typeof getSsrDevManifest> | ReturnType<typeof getSsrProdManifest> {
+	return import.meta.env.DEV ? getSsrDevManifest(target) : getSsrProdManifest();
+}
+
+export { getSsrManifest as getManifest };

package/src/server/routes.ts

@@ -0,0 +1,138 @@
+// @ts-expect-error
+import fileRoutes from "solid-start:routes";
+import { createRouter } from "radix3";
+
+import type { FetchEvent } from "./types.ts";
+
+interface Route {
+	path: string;
+	id: string;
+	children?: Route[];
+	page?: boolean;
+	$component?: any;
+	$HEAD?: any;
+	$GET?: any;
+	$POST?: any;
+	$PUT?: any;
+	$PATCH?: any;
+	$DELETE?: any;
+}
+
+export const pageRoutes = defineRoutes(
+	(fileRoutes as unknown as Route[]).filter((o) => o.page),
+);
+
+function defineRoutes(fileRoutes: Route[]) {
+	function processRoute(
+		routes: Route[],
+		route: Route,
+		id: string,
+		full: string,
+	) {
+		const parentRoute = Object.values(routes).find((o) => {
+			return id.startsWith(o.id + "/");
+		});
+
+		if (!parentRoute) {
+			routes.push({
+				...route,
+				id,
+				path: id.replace(/\([^)/]+\)/g, "").replace(/\/+/g, "/"),
+			});
+			return routes;
+		}
+		processRoute(
+			parentRoute.children || (parentRoute.children = []),
+			route,
+			id.slice(parentRoute.id.length),
+			full,
+		);
+
+		return routes;
+	}
+
+	return fileRoutes
+		.sort((a, b) => a.path.length - b.path.length)
+		.reduce((prevRoutes: Route[], route) => {
+			return processRoute(prevRoutes, route, route.path, route.path);
+		}, []);
+}
+
+const router = createRouter({
+	routes: (fileRoutes as unknown as Route[]).reduce(
+		(memo, route) => {
+			if (!containsHTTP(route)) return memo;
+			const path = route.path
+				.replace(/\([^)/]+\)/g, "")
+				.replace(/\/+/g, "/")
+				.replace(/\*([^/]*)/g, (_, m) => `**:${m}`)
+				.split("/")
+				.map((s) =>
+					s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s),
+				)
+				.join("/");
+			if (/:[^/]*\?/g.test(path)) {
+				throw new Error(
+					`Optional parameters are not supported in API routes: ${path}`,
+				);
+			}
+			if (memo[path]) {
+				throw new Error(
+					`Duplicate API routes for "${path}" found at "${memo[path]!.route.path}" and "${
+						route.path
+					}"`,
+				);
+			}
+			memo[path] = { route };
+			return memo;
+		},
+		{} as Record<string, { route: Route }>,
+	),
+});
+
+function containsHTTP(route: Route) {
+	return (
+		route["$HEAD"] ||
+		route["$GET"] ||
+		route["$POST"] ||
+		route["$PUT"] ||
+		route["$PATCH"] ||
+		route["$DELETE"]
+	);
+}
+
+export function matchAPIRoute(
+	path: string,
+	method: string,
+):
+	| {
+			params?: Record<string, any>;
+			handler: {
+				import: () => Promise<Record<string, (e: FetchEvent) => Promise<any>>>;
+			};
+			isPage: boolean;
+	  }
+	| undefined {
+	const match = router.lookup(path);
+	if (match && match.route) {
+		const route = match.route;
+
+		// Find the appropriate handler for the HTTP method
+		const handler =
+			method === "HEAD" ? route.$HEAD || route.$GET : route[`$${method}`];
+
+		if (handler === undefined) return;
+
+		// Check if this is a page route
+		const isPage = route.page === true && route.$component !== undefined;
+
+		// Return comprehensive route information
+		return {
+			handler,
+			params: match.params,
+			isPage,
+		};
+	}
+
+	return undefined;
+}

package/src/server/server-fns-runtime.ts

@@ -0,0 +1,31 @@
+import { getRequestEvent } from "solid-js/web";
+import { provideRequestEvent } from "solid-js/web/storage";
+
+export function createServerReference(fn: Function, id: string) {
+  if (typeof fn !== "function")
+    throw new Error("Export from a 'use server' module must be a function");
+  let baseURL = import.meta.env.BASE_URL ?? "/";
+  if(!baseURL.endsWith("/")) baseURL += "/"
+
+  return new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "url") {
+        return `${baseURL}_server?id=${encodeURIComponent(id)}`;
+      }
+      if (prop === "GET") return receiver;
+      return (target as any)[prop];
+    },
+    apply(target, thisArg, args) {
+      const ogEvt = getRequestEvent();
+      if (!ogEvt) throw new Error("Cannot call server function outside of a request");
+      const evt = { ...ogEvt };
+      evt.locals.serverFunctionMeta = {
+        id
+      };
+      evt.serverOnly = true;
+      return provideRequestEvent(evt, () => {
+        return fn.apply(thisArg, args);
+      });
+    }
+  });
+}