@solidjs/start 1.2.1 → 2.0.0-alpha.1

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,46 @@
+// @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,87 @@
+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,85 @@
+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;

package/src/server/handler.ts

@@ -0,0 +1,257 @@
+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 = stripBaseUrl(url.pathname);
+
+      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);
+        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);
+        }, 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;
+      }
+
+      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) {
+    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,
+    });
+  }
+
+  const eventCookies = event.response.headers.getSetCookie?.() ?? [];
+  for (const cookie of eventCookies) {
+    ret.headers.append("Set-Cookie", cookie);
+  }
+
+  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

@@ -0,0 +1,29 @@
+export { default as lazy } from "../shared/lazy.ts";
+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)
+ */
+// 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,21 @@
+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,23 @@
+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,21 @@
+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>;
+  };
+}