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

package/src/server/handler.ts

@@ -10,89 +10,79 @@ 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 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>) = {},
+  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 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 = stripBaseUrl(url.pathname);
 
-			const serverFunctionTest = join(import.meta.env.BASE_URL, SERVER_FN_BASE);
-			if (pathname.startsWith(serverFunctionTest)) {
-				const serverFnResponse = await handleServerFunction(e);
+      if (pathname.startsWith(SERVER_FN_BASE)) {
+        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);
+        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)
+          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")) {
+        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);
+        }, resolvedOptions);
+        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;
-			}
+        return html;
+      }
 
-			if (resolvedOptions.onCompleteAll) {
+      if (resolvedOptions.onCompleteAll) {
         const og = resolvedOptions.onCompleteAll;
         resolvedOptions.onCompleteAll = options => {
           handleStreamCompleteRedirect(context)(options);
@@ -107,10 +97,10 @@ export function createBaseHandler(
         };
       } else resolvedOptions.onCompleteShell = handleShellCompleteRedirect(context, e);
 
-			const _stream = renderToStream(() => {
-				(sharedConfig.context as any).event = context;
-				return fn(context);
-			}, resolvedOptions);
+      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")) {
@@ -118,48 +108,46 @@ export function createBaseHandler(
         return redirect(context.response.headers.get("Location")!, status);
       }
 
-			if (mode === "async") return await stream
+      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
+      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
-		}),
-	});
+      return readable;
+    }),
+  });
 
-	const app = new H3();
+  const app = new H3();
 
   app.use(handler);
 
-	return app;
+  return app;
 }
 
 export function createHandler(
-	fn: (context: PageEvent) => JSX.Element,
-	options:
-		| HandlerOptions
-		| ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
+  fn: (context: PageEvent) => JSX.Element,
+  options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
 ) {
-	return createBaseHandler(createPageEvent, fn, options);
+  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");
+  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'): [];
+  // 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 = [
+  const assets = [
     ...mergedCSS,
     ...(await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY)),
     ...(await manifest.getAssets(import.meta.env.START_APP_ENTRY)),
@@ -169,52 +157,49 @@ export async function createPageEvent(ctx: FetchEvent) {
     //     )
     //   : [])
   ];
-	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;
+  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 });
-	}
+  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.status = status;
       e.res.headers.set("Location", context.response.headers.get("Location")!);
     }
   };
@@ -234,17 +219,39 @@ function produceResponseWithEventHeaders(res: Response) {
   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) {
+  if (300 <= res.status && res.status < 400) {
+    const cookies = res.headers.getSetCookie?.() ?? [];
+    const headers = new Headers();
+    res.headers.forEach((value, key) => {
+      if (key.toLowerCase() !== "set-cookie") {
+        headers.set(key, value);
+      }
+    });
+    for (const cookie of cookies) {
+      headers.append("Set-Cookie", cookie);
+    }
     ret = new Response(res.body, {
       status: res.status,
       statusText: res.statusText,
-      headers: Object.fromEntries(res.headers.entries())
+      headers,
     });
   }
 
-  for(const [name, value] of event.response.headers) {
-    ret.headers.set(name, value);
+  const eventCookies = event.response.headers.getSetCookie?.() ?? [];
+  for (const cookie of eventCookies) {
+    ret.headers.append("Set-Cookie", cookie);
   }
 
-  return ret
+  for (const [name, value] of event.response.headers) {
+    if (name.toLowerCase() !== "set-cookie") {
+      ret.headers.set(name, value);
+    }
+  }
+
+  return ret;
+}
+
+function stripBaseUrl(path: string) {
+  if (import.meta.env.BASE_URL === "/" || import.meta.env.BASE_URL === "") return path;
+  return path.slice(import.meta.env.BASE_URL.length);
 }

package/src/server/index.tsx

@@ -3,6 +3,19 @@ export { getServerFunctionMeta } from "../shared/serverFunction.ts";
 export { StartServer } from "./StartServer.tsx";
 export { createHandler } from "./handler.ts";
 
+export type {
+  APIEvent,
+  APIHandler,
+  Asset,
+  ContextMatches,
+  DocumentComponentProps,
+  FetchEvent,
+  HandlerOptions,
+  PageEvent,
+  ResponseStub,
+  ServerFunctionMeta,
+} from "./types.ts";
+
 /**
  * Checks if user has set a redirect status in the response.
  * If not, falls back to the 302 (temporary redirect)

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

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

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

@@ -3,17 +3,19 @@ import { join } from "pathe";
 export function getClientDevManifest() {
   return {
     import(id) {
-      return import(/* @vite-ignore */ join("/", 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()
-      })));
+      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

@@ -8,14 +8,16 @@ export function getSsrDevManifest(environment: "client" | "ssr") {
 
       const assets = (await import(/* @vite-ignore */ assetsPath)).default;
 
-      return await Promise.all(assets.map(async (v: any) => ({
-        ...v,
-        children: await v.children()
-      })));
+      return await Promise.all(
+        assets.map(async (v: any) => ({
+          ...v,
+          children: await v.children(),
+        })),
+      );
     },
   } satisfies StartManifest & {
-		path(id: string): string;
-	};
+    path(id: string): string;
+  };
 }
 
 export { getSsrDevManifest as getSsrManifest };

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

@@ -2,17 +2,20 @@ export function getClientProdManifest() {
   return {
     import(id) {
       // @ts-ignore
-      return import(/* @vite-ignore */ window.manifest[id].output)
+      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 ?? []
+      return window.manifest[id]?.assets ?? [];
     },
     async json() {
       // @ts-ignore
-      return window.manifest
+      return window.manifest;
     },
-  } satisfies StartManifest & { json(): Promise<Record<string, any>>, import(id: string): Promise<any>; }
+  } satisfies StartManifest & {
+    json(): Promise<Record<string, any>>;
+    import(id: string): Promise<any>;
+  };
 }

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

@@ -5,121 +5,105 @@ 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) {
+  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}'`);
+      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) {
+      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> = {};
+      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);
+      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),
-				};
-			}
+      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;
-	};
+      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" }),
-			},
-		}));
+  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[] = [],
+  manifest: Manifest,
+  id: string,
+  assetMap = new Map(),
+  stack: string[] = [],
 ) {
-	if (stack.includes(id)) {
-		return [];
-	}
+  if (stack.includes(id)) {
+    return [];
+  }
 
-	const cached = assetMap.get(id);
-	if (cached) {
-		return cached;
-	}
-	const chunk = manifest[id];
-	if (!chunk) {
-		return [];
-	}
+  const cached = assetMap.get(id);
+  if (cached) {
+    return cached;
+  }
+  const chunk = manifest[id];
+  if (!chunk) {
+    return [];
+  }
 
-	if (!entryImports) {
-		entryImports = [
-			entryId,
-			...(manifest[entryId]?.imports ?? [])
-		];
-	}
+  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;
+  // 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);
+  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;
+  return all;
 }