@solidjs/start 1.1.7 → 2.0.0-alpha.0

package/src/middleware/index.ts

@@ -0,0 +1,82 @@
+// @refresh skip
+
+import type { H3Event, Middleware } from "h3";
+import { getFetchEvent } from "../server/fetchEvent.ts";
+import type { FetchEvent } from "../server/types.ts";
+
+/** Function responsible for receiving an observable [operation]{@link Operation} and returning a [result]{@link OperationResult}. */
+
+export type MiddlewareFn = (event: FetchEvent) => Promise<unknown> | unknown;
+/** This composes an array of Exchanges into a single ExchangeIO function */
+
+export type RequestMiddleware = (
+	event: FetchEvent,
+) =>
+	| Response
+	| Promise<Response>
+	| void
+	| Promise<void>
+	| Promise<void | Response>;
+
+// copy-pasted from h3/dist/index.d.ts
+type EventHandlerResponse<T = any> = T | Promise<T>;
+type ResponseMiddlewareResponseParam = { body?: Awaited<EventHandlerResponse> };
+
+export type ResponseMiddleware = (
+	event: FetchEvent,
+	response: ResponseMiddlewareResponseParam,
+) => Response | Promise<Response> | void | Promise<void>;
+
+function wrapRequestMiddleware(onRequest: RequestMiddleware) {
+	return async (h3Event: H3Event) => {
+		const fetchEvent = getFetchEvent(h3Event);
+		const response = await onRequest(fetchEvent);
+		if (response) return response;
+	};
+}
+
+function wrapResponseMiddleware(
+	onBeforeResponse: ResponseMiddleware,
+): Middleware {
+	return async (h3Event, next) => {
+		const resp = await next();
+
+		const fetchEvent = getFetchEvent(h3Event);
+		const mwResponse = await onBeforeResponse(fetchEvent, {
+			body: (resp as any)?.body,
+		});
+		if (mwResponse) return mwResponse;
+	};
+}
+
+export function createMiddleware(
+	args:
+		| {
+				/** @deprecated Use H3 `Middleware` */
+				onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
+				/** @deprecated Use H3 `Middleware` */
+				onBeforeResponse?:
+					| ResponseMiddleware
+					| ResponseMiddleware[]
+					| undefined;
+		  }
+		| Middleware[],
+): Middleware[] {
+	if (Array.isArray(args)) return args;
+
+	const mw: Middleware[] = [];
+
+	if (typeof args.onRequest === "function") {
+		mw.push(wrapRequestMiddleware(args.onRequest));
+	} else if (Array.isArray(args.onRequest)) {
+		mw.push(...args.onRequest.map(wrapRequestMiddleware));
+	}
+
+	if (typeof args.onBeforeResponse === "function") {
+		mw.push(wrapResponseMiddleware(args.onBeforeResponse));
+	} else if (Array.isArray(args.onBeforeResponse)) {
+		mw.push(...args.onBeforeResponse.map(wrapResponseMiddleware));
+	}
+
+	return mw;
+}

package/src/router.tsx

@@ -0,0 +1,36 @@
+import { lazy, type Component } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+
+import { pageRoutes as routeConfigs } from "./server/routes.ts";
+import type { PageEvent } from "./server/types.ts";
+
+const components: Record<string, Component> = {};
+
+export function createRoutes() {
+  function createRoute(route: any) {
+    const component = route.$component && (components[route.$component.src] ??= lazy(route.$component.import));
+
+    return {
+      ...route,
+      ...(route.$$route ? route.$$route.require().route : undefined),
+      info: {
+        ...(route.$$route ? route.$$route.require().route.info : {}),
+        filesystem: true
+      },
+      component,
+      children: route.children ? route.children.map(createRoute) : undefined
+    };
+  }
+  const routes = routeConfigs.map(createRoute);
+  return routes;
+}
+
+let routes: any[];
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/routing/file-routes
+ */
+export const FileRoutes = isServer
+  ? () => (getRequestEvent() as PageEvent).routes
+  : () => routes || (routes = createRoutes());

package/src/server/StartServer.tsx

@@ -0,0 +1,62 @@
+// @refresh skip
+import type { Component } from "solid-js";
+import {
+  Hydration,
+  HydrationScript,
+  NoHydration,
+  getRequestEvent,
+  ssr
+} from "solid-js/web";
+import App from "solid-start:app";
+
+import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.tsx";
+import { useAssets } from "./assets/index.ts";
+import { getSsrManifest } from "./manifest/ssr-manifest.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
+          assets={<HydrationScript />}
+          scripts={
+            <>
+              <script
+                type="module"
+                nonce={nonce}
+                async
+                src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}
+              />
+            </>
+          }
+        >
+          {!import.meta.env.START_ISLANDS ? (
+            <Hydration>
+              <ErrorBoundary>
+                <App />
+              </ErrorBoundary>
+            </Hydration>
+          ) : (
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
+          )}
+        </props.document>
+      </TopErrorBoundary>
+    </NoHydration>
+  );
+}

package/src/server/assets/index.ts

@@ -0,0 +1,70 @@
+import { onCleanup, sharedConfig } from "solid-js";
+import { getRequestEvent, useAssets as useAssets_ } from "solid-js/web";
+import { renderAsset, type Asset } from "./render.tsx";
+
+const REGISTRY = Symbol("assetRegistry");
+const NOOP = () => "";
+
+type AssetEntity = {
+  key: string;
+  consumers: number;
+  preloadEl?: HTMLLinkElement;
+  ssrIdx?: number;
+};
+type Registry = Record<string, AssetEntity>;
+
+const keyAttrs = ["href", "rel", "data-vite-dev-id"] as const;
+
+const getEntity = (registry: Registry, asset: Asset) => {
+  let key = asset.tag;
+  for (const k of keyAttrs) {
+    if (!(k in asset.attrs)) continue;
+    key += `[${k}='${asset.attrs[k as keyof Asset["attrs"]]}']`;
+  }
+
+  const entity = (registry[key] ??= {
+    key,
+    consumers: 0
+  });
+
+  return entity;
+};
+
+export const useAssets = (assets: Asset[], nonce?: string) => {
+  if (!assets.length) return;
+
+  const registry: Registry = (getRequestEvent()!.locals[REGISTRY] ??= {});
+  const ssrRequestAssets: Function[] = (sharedConfig.context as any)?.assets;
+  const cssKeys: string[] = [];
+
+  for (const asset of assets) {
+    const entity = getEntity(registry, asset);
+    const isCSSLink = asset.tag === "link" && asset.attrs.rel === "stylesheet";
+    const isCSS = isCSSLink || asset.tag === "style";
+    if (isCSS) {
+      cssKeys.push(entity.key);
+    }
+
+    entity.consumers++;
+    if (entity.consumers > 1) continue;
+
+    // Mounting logic
+    useAssets_(() => renderAsset(asset, nonce));
+    entity.ssrIdx = ssrRequestAssets.length - 1;
+  }
+
+  onCleanup(() => {
+    for (const key of cssKeys) {
+      const entity = registry[key]!;
+      entity.consumers--;
+      if (entity.consumers != 0) {
+        continue;
+      }
+
+      // Ideally this logic should be implemented directly in dom-expressions
+      ssrRequestAssets.splice(entity.ssrIdx!, 1, NOOP);
+
+      delete registry[key];
+    }
+  });
+};

package/src/server/assets/render.tsx

@@ -0,0 +1,42 @@
+// @refresh skip
+import type { JSX } from "solid-js";
+
+const assetMap = {
+  style: (props: { attrs: JSX.StyleHTMLAttributes<HTMLStyleElement>; children?: JSX.Element }) => (
+    <style {...props.attrs}>{props.children}</style>
+  ),
+  link: (props: { attrs: JSX.LinkHTMLAttributes<HTMLLinkElement> }) => <link {...props.attrs} />,
+  script: (props: {
+    attrs: JSX.ScriptHTMLAttributes<HTMLScriptElement>;
+    key: string | undefined;
+  }) => {
+    return props.attrs.src ? (
+      <script {...props.attrs} id={props.key}>
+        {" "}
+      </script>
+    ) : null;
+  },
+  noscript: (props: { attrs: JSX.HTMLAttributes<HTMLElement>; children: JSX.Element }) => (
+    <noscript {...props.attrs}>{props.children}</noscript>
+  )
+};
+
+export function renderAsset(asset: Asset, nonce?: string) {
+  let { tag, attrs: { key, ...attrs } = { key: undefined }, children } = asset as any;
+  return (assetMap as any)[tag]({ attrs: { ...attrs, nonce }, key, children });
+}
+
+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 };
+    };

package/src/server/collect-styles.ts

@@ -0,0 +1,94 @@
+import path from "node:path";
+import { resolve } from "pathe";
+import type { DevEnvironment, EnvironmentModuleNode } from "vite";
+
+async function getViteModuleNode(
+	vite: DevEnvironment,
+	file: string,
+) {
+	let nodePath = file;
+	let node = vite.moduleGraph.getModuleById(file);
+
+	if (!node) {
+		const resolvedId = await vite.pluginContainer.resolveId(file, undefined);
+		if (!resolvedId) return;
+
+		nodePath = resolvedId.id;
+		node = vite.moduleGraph.getModuleById(file);
+	}
+
+	if (!node) {
+		nodePath = resolve(nodePath);
+		node = await vite.moduleGraph.getModuleByUrl(file);
+	}
+
+	if (!node) {
+		await vite.moduleGraph.ensureEntryFromUrl(nodePath, false);
+		node = vite.moduleGraph.getModuleById(nodePath);
+	}
+
+	return node;
+}
+
+async function findModuleDependencies(
+	vite: DevEnvironment,
+	file: string,
+	deps: Set<EnvironmentModuleNode>,
+	crawledFiles = new Set<string>()
+) {
+	crawledFiles.add(file);
+	const module = await getViteModuleNode(vite, file);
+	if (!module?.id || deps.has(module)) return;
+
+	deps.add(module);
+	
+	if (module.url.endsWith(".css") || module.url.includes("node_modules")) return;
+
+	if (!module.transformResult) {
+		await vite.transformRequest(module.id).catch(() => {});
+	}
+	if (!module.transformResult?.deps) return;
+
+	// Relying on module.transformResult.deps instead of module.importedModules because:
+	// transformResult properly separates imports into deps and dynamicDeps, importedModules doesn't
+	// Style crawling has to skip dynamic imports as such modules load their styles themselves
+	for (const dep of module.transformResult.deps) {
+		if (crawledFiles.has(dep)) {
+			continue;
+		}
+		await findModuleDependencies(vite, dep, deps, crawledFiles);
+	}
+}
+
+// Vite doesn't expose these so we just copy the list for now
+// https://github.com/vitejs/vite/blob/d6bde8b03d433778aaed62afc2be0630c8131908/packages/vite/src/node/constants.ts#L49C23-L50
+const cssFileRegExp =
+	/\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)$/;
+// https://github.com/vitejs/vite/blob/d6bde8b03d433778aaed62afc2be0630c8131908/packages/vite/src/node/plugins/css.ts#L160
+const cssModulesRegExp = new RegExp(`\\.module${cssFileRegExp.source}`);
+
+const isCssFile = (file: string) => cssFileRegExp.test(file);
+export const isCssModulesFile = (file: string) => cssModulesRegExp.test(file);
+
+export async function findStylesInModuleGraph(
+	vite: DevEnvironment,
+	id: string,
+) {
+	const absolute = path.resolve(process.cwd(), id);
+	const dependencies = new Set<EnvironmentModuleNode>();
+
+	try {
+		await findModuleDependencies(vite, absolute, dependencies);
+	} catch (e) {
+		console.error(e);
+	}
+
+	const styles: Record<string, any> = {};
+	for (const dep of dependencies) {
+		if (dep.id && isCssFile(dep.url)) {
+			styles[dep.id] = dep.url;
+		}
+	}
+
+	return styles;
+}

package/src/server/fetchEvent.spec.ts

@@ -0,0 +1,89 @@
+import * as h3 from "h3";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+	createFetchEvent,
+	getFetchEvent,
+	mergeResponseHeaders,
+} from "./fetchEvent.ts";
+
+vi.mock(import("h3"), async (mod) => {
+	return {
+		...(await mod()),
+		getRequestIP: vi.fn(),
+	};
+});
+
+const mockedH3 = vi.mocked(h3);
+
+const createMockH3Event = (): h3.H3Event => {
+	const event = new h3.H3Event(new Request("http://localhost/test"));
+
+	event.res.status = 200;
+	event.res.statusText = "OK";
+
+	return event;
+};
+
+describe("fetchEvent", () => {
+	let mockH3Event: h3.H3Event;
+
+	beforeEach(() => {
+		mockH3Event = createMockH3Event();
+		vi.clearAllMocks();
+
+		mockedH3.getRequestIP.mockReturnValue("127.0.0.1");
+	});
+
+	describe("createFetchEvent", () => {
+		it("should create a FetchEvent from H3Event", () => {
+			const fetchEvent = createFetchEvent(mockH3Event);
+
+			expect(fetchEvent).toEqual({
+				request: mockH3Event.req,
+				response: expect.any(Object),
+				clientAddress: "127.0.0.1",
+				locals: {},
+				nativeEvent: mockH3Event,
+			});
+		});
+
+		it("should create response stub with correct properties", () => {
+			const fetchEvent = createFetchEvent(mockH3Event);
+
+			expect(fetchEvent.response).toHaveProperty("status");
+			expect(fetchEvent.response).toHaveProperty("statusText");
+			expect(fetchEvent.response).toHaveProperty("headers");
+		});
+	});
+
+	describe("getFetchEvent", () => {
+		it("should create and cache FetchEvent on first call", () => {
+			const fetchEvent = getFetchEvent(mockH3Event);
+
+			expect(mockH3Event.context.solidFetchEvent).toBe(fetchEvent);
+			expect(fetchEvent.nativeEvent).toBe(mockH3Event);
+		});
+
+		it("should return cached FetchEvent on subsequent calls", () => {
+			const firstCall = getFetchEvent(mockH3Event);
+			const secondCall = getFetchEvent(mockH3Event);
+
+			expect(firstCall).toBe(secondCall);
+		});
+	});
+
+	describe("mergeResponseHeaders", () => {
+		it("should merge headers from Headers object to H3Event", () => {
+			const headers = new Headers({
+				"content-type": "application/json",
+				"x-custom": "value",
+			});
+
+			mergeResponseHeaders(mockH3Event, headers);
+
+			expect(headers.get("content-type")).toBe("application/json");
+			expect(headers.get("x-custom")).toBe("value");
+		});
+	});
+});

package/src/server/fetchEvent.ts

@@ -0,0 +1,36 @@
+import { type EventHandler, getRequestIP, type H3Event, type Middleware } from "h3";
+import { provideRequestEvent } from "solid-js/web/storage";
+import type { FetchEvent } from "./types.ts";
+
+const FETCH_EVENT_CONTEXT = "solidFetchEvent";
+
+export function createFetchEvent(event: H3Event): FetchEvent {
+	return {
+		request: event.req,
+		response: event.res,
+		clientAddress: getRequestIP(event),
+		locals: {},
+		nativeEvent: event,
+	};
+}
+
+export function getFetchEvent(h3Event: H3Event): FetchEvent {
+	if (!h3Event.context[FETCH_EVENT_CONTEXT]) {
+		const fetchEvent = createFetchEvent(h3Event);
+		h3Event.context[FETCH_EVENT_CONTEXT] = fetchEvent;
+	}
+
+	return h3Event.context[FETCH_EVENT_CONTEXT] as any;
+}
+
+export function mergeResponseHeaders(h3Event: H3Event, headers: Headers) {
+	for (const [key, value] of headers.entries()) {
+		h3Event.res.headers.append(key, value);
+	}
+}
+
+export const decorateHandler = <T extends EventHandler>(fn: T) =>
+	(event => provideRequestEvent(getFetchEvent(event), () => fn(event))) as T;
+
+export const decorateMiddleware = <T extends Middleware>(fn: T) =>
+	((event, next) => provideRequestEvent(getFetchEvent(event), () => fn(event, next))) as T;