@solidjs/start 2.0.0-beta.0 → 2.0.0-beta.10

package/src/middleware/index.ts

@@ -1,92 +0,0 @@
-// @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,
-    });
-    if (mwResponse) return mwResponse;
-  };
-}
-
-/**
- * Creates middleware for handling requests and responses.
- *
- * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
-/**
- * Creates request/response middlewares via H3.
- *
- * Accepts an array of H3 {@link Middleware}
- *
- * @tip To run your middleware before response, `await next()` in your function block.
- *@example
- * const middleware = createMiddleware([
- *   async (event, next) => {
- *     const resp = await next();
- *     if (resp instanceof Response) return resp;
- *     return new Response("Not found", { status: 404 });
- *   },
- * ]);
- *
- */
-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

@@ -1,37 +0,0 @@
-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

@@ -1,58 +0,0 @@
-// @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 PatchVirtualDevStyles from "./assets/PatchVirtualDevStyles.tsx";
-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={
-            <>
-              <PatchVirtualDevStyles nonce={nonce} />
-              <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/PatchVirtualDevStyles.tsx

@@ -1,31 +0,0 @@
-/**
- * Patches the data-vite-dev-id attribute for style tags of virtual modules
- *
- * Per Vite's convention, virtual module ids are prefixed with \0 (null byte):
- * https://vite.dev/guide/api-plugin#virtual-modules-convention
- *
- * However this null byte cannot be server rendered properly.
- * Vite client runtime then fails to find style's with wrong null bytes,
- * and instead inserts duplicate style's.
- *
- * This patch replaces the serializable /@id/__x00__ with the proper null byte,
- * and has to run before Vite's client runtime:
- * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/client/client.ts#L529
- *
- * TODO: This should be solved in Vite directly!
- */
-const patch = function () {
-  document.querySelectorAll<HTMLElement>("style[data-vite-dev-id]").forEach(function (el) {
-    el.setAttribute("data-vite-dev-id", el.dataset.viteDevId!.replace("/@id/__x00__", "\0"));
-  });
-};
-
-const serializedPatch = `(${patch.toString()})();`;
-
-const PatchVirtualDevStyles = (props: { nonce?: string }) => {
-  if (!import.meta.env.PROD) {
-    return <script nonce={props.nonce} innerHTML={serializedPatch} />;
-  }
-};
-
-export default PatchVirtualDevStyles;

package/src/server/assets/index.ts

@@ -1,70 +0,0 @@
-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

@@ -1,46 +0,0 @@
-// @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

@@ -1,70 +0,0 @@
-import path from "node:path";
-import type { DevEnvironment, EnvironmentModuleNode } from "vite";
-
-async function getViteModuleNode(vite: DevEnvironment, file: string, importer?: string) {
-  try {
-    const res = await vite.fetchModule(file, importer);
-    if (!("id" in res)) return;
-    return vite.moduleGraph.getModuleById(res.id);
-  } catch (err) {}
-}
-
-async function findModuleDependencies(
-  vite: DevEnvironment,
-  file: string,
-  deps: Set<EnvironmentModuleNode>,
-  crawledFiles = new Set<string>(),
-  importer?: string,
-) {
-  crawledFiles.add(file);
-  const module = await getViteModuleNode(vite, file, importer);
-  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, module.id);
-  }
-}
-
-// 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

@@ -1,85 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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;