@solidjs/start 0.4.0-alpha.0 → 0.4.0-alpha.2

package/README.md

@@ -0,0 +1,12 @@
+# Solid Start
+
+This is the SolidStart framework and CLI.
+
+The quickest way to get started:
+
+```bash
+npm init solid@latest my-app
+cd my-app
+npm install
+npm run dev
+```

package/client/StartClient.tsx

@@ -1,5 +1,6 @@
 // @ts-ignore
 import App from "#start/app";
+import { ErrorBoundary } from "../shared/ErrorBoundary";
 import "./mount";
 
 function Dummy(props) {
@@ -10,7 +11,9 @@ export function StartClient() {
   return (
     <Dummy>
       <Dummy>
-        <App />
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>
       </Dummy>
     </Dummy>
   );

package/config/index.js

@@ -1,4 +1,5 @@
 import { serverFunctions } from "@vinxi/server-functions/plugin";
+import { serverTransform } from "@vinxi/server-functions/server";
 import defu from "defu";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -42,13 +43,18 @@ export function defineConfig(baseConfig = {}) {
     appRoot: "./src",
     ssr: true,
     islands: false,
-    serverPlugins: []
   });
+  let server = start.server;
+  if (!start.ssr) {
+    server = { ...server, prerender: { routes: ["/"] }  };
+  }
+
   return createApp({
     server: {
       compressPublicAssets: {
         brotli: true
-      }
+      },
+      ...server
     },
     routers: [
       {
@@ -63,14 +69,15 @@ export function defineConfig(baseConfig = {}) {
         mode: "handler",
         handler: `${start.appRoot}/entry-server.tsx`,
         middleware: start.middleware,
-        ...(start.ssr
-          ? { routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }) }
-          : {}),
+        routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         extensions,
         target: "server",
         plugins: () => [
           config("user", userConfig),
           ...plugins,
+          serverTransform({
+            runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url)))
+          }),
           start.islands ? serverComponents.server() : null,
           solid({ ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
@@ -138,16 +145,10 @@ export function defineConfig(baseConfig = {}) {
         ],
         base: "/_build"
       },
-      // {
-      //   name: "server",
-      //   mode: "handler",
-      //   base: "/_server",
-      //   handler: serverFunctions.handler,
-      //   target: "server",
-      //   ...(overrides ?? {}),
-      //   plugins: () => [serverserver(), ...(overrides?.plugins?.() ?? [])],
-      // },
       serverFunctions.router({
+        handler: normalize(fileURLToPath(new URL("./server-handler.js", import.meta.url))),
+        runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url))),
+        // routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         plugins: () => [
           config("user", userConfig),
           ...plugins,

package/config/server-fns-runtime.jsx

@@ -0,0 +1,20 @@
+import { getRequestEvent } from "solid-js/web";
+import { provideRequestEvent } from "solid-js/web/storage";
+import { cloneEvent } from "../server";
+
+export function createServerReference(fn, id, name) {
+  return new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "url") {
+        return `/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
+      }
+    },
+    apply(target, thisArg, args) {
+      const evt = cloneEvent(getRequestEvent());
+      evt.serverOnly = true;
+      return provideRequestEvent(evt, () => {
+        return fn.apply(thisArg, args);
+      });
+    }
+  });
+}

package/config/server-handler.js

@@ -0,0 +1,113 @@
+/// <reference types="vinxi/types/server" />
+import { crossSerializeStream, fromJSON } from "seroval";
+import { provideRequestEvent } from "solid-js/web/storage";
+import invariant from "vinxi/lib/invariant";
+import {
+  eventHandler,
+  getHeader,
+  getRequestURL,
+  readBody,
+  readFormData,
+  setHeader
+} from "vinxi/server";
+import { getFetchEvent } from "../server/middleware";
+
+function serializeToStream(id, value) {
+  return new ReadableStream({
+    start(controller) {
+      crossSerializeStream(value, {
+        scopeId: id,
+        onSerialize(data, initial) {
+          const result = initial ? `($R["${id}"]=[],${data})` : data;
+          controller.enqueue(new TextEncoder().encode(`${result};\n`));
+        },
+        onDone() {
+          // controller.enqueue(`delete $R["${id}"];\n`);
+          controller.close();
+        },
+        onError(error) {
+          // controller.enqueue(`delete $R["${id}"];\n`);
+          controller.error(error);
+        }
+      });
+    }
+  });
+}
+
+async function handleServerFunction(event) {
+  invariant(event.method === "POST", `Invalid method ${event.method}. Expected POST.`);
+
+  const serverReference = getHeader(event, "x-server-id");
+  const instance = getHeader(event, "x-server-instance");
+  const url = getRequestURL(event);
+  let filepath, name;
+  if (serverReference) {
+    invariant(typeof serverReference === "string", "Invalid server function");
+    [filepath, name] = serverReference.split("#");
+  } else {
+    filepath = url.searchParams.get("id");
+    name = url.searchParams.get("name");
+    if (!filepath || !name) throw new Error("Invalid request");
+  }
+
+  const action = (
+    await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
+  )[name];
+  let parsed = [];
+
+  // grab bound arguments from url when no JS
+  if (!instance) {
+    const args = url.searchParams.get("args");
+    if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
+  }
+  const contentType = getHeader(event, "content-type");
+  if (
+    contentType.startsWith("multipart/form-data") ||
+    contentType.startsWith("application/x-www-form-urlencoded")
+  ) {
+    parsed.push(await readFormData(event));
+  } else {
+    parsed = fromJSON(await readBody(event));
+  }
+  try {
+    const result = await provideRequestEvent(getFetchEvent(event), () => action(...parsed));
+
+    // handle no JS success case
+    if (!instance) {
+      const isError = result instanceof Error;
+      const refererUrl = new URL(getHeader(event, "referer"));
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: refererUrl.toString(),
+          ...(result ? { "Set-Cookie": `flash=${JSON.stringify({
+            url: url.pathname + encodeURIComponent(url.search),
+            result: isError ? result.message : result,
+            error: isError,
+            input: [...parsed.slice(0, -1), [...parsed[parsed.length-1].entries()]]
+          })}; Secure; HttpOnly;`} : {})
+        }
+      });
+    }
+
+    setHeader(event, "content-type", "text/javascript");
+    return serializeToStream(instance, result);
+  } catch (x) {
+    if (x instanceof Response && x.status === 302) {
+      return new Response(null, {
+        status: instance ? 204 : 302,
+        headers: {
+          Location: x.headers.get("Location")
+        }
+      });
+    }
+    return new Response(serializeToStream(instance, x), {
+      status: 500,
+      headers: {
+        "Content-Type": "text/javascript"
+      }
+    });
+  }
+}
+
+export default eventHandler(handleServerFunction);

package/config/server-runtime.jsx

@@ -1,25 +1,89 @@
+import { deserialize, toJSONAsync } from "seroval";
 import { createIslandReference } from "../server/islands";
 
-async function fetchServerAction(base, id, args) {
-  console.log("fetching serevr action");
-  const response = await fetch(base, {
+async function deserializeStream(id, response) {
+  if (!response.body) {
+    throw new Error("missing body");
+  }
+  const reader = response.body.getReader();
+
+  async function pop() {
+    const result = await reader.read();
+    if (!result.done) {
+      const serialized = new TextDecoder().decode(result.value);
+      const splits = serialized.split("\n");
+      for (const split of splits) {
+        if (split !== "") {
+          deserialize(split);
+        }
+      }
+      await pop();
+    }
+  }
+
+  const result = await reader.read();
+  if (result.done) {
+    throw new Error("Unexpected end of body");
+  }
+  const serialized = new TextDecoder().decode(result.value);
+  let pending = true;
+  let revived;
+  const splits = serialized.split("\n");
+  for (const split of splits) {
+    if (split !== "") {
+      const current = deserialize(split);
+      if (pending) {
+        revived = current;
+        pending = false;
+      }
+    }
+  }
+
+  pop().then(
+    () => {
+      delete self.$R[id];
+    },
+    () => {
+      // no-op
+    }
+  );
+
+  return revived;
+}
+
+let INSTANCE = 0;
+
+function createRequest(base, id, instance, body, contentType) {
+  return fetch(base, {
     method: "POST",
     headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      "server-action": id
+      "x-server-id": id,
+      "x-server-instance": instance,
+      ...(contentType ? { "Content-Type": contentType } : {})
     },
-    body: JSON.stringify(args)
+    body
   });
+}
 
-  const json = await response.json();
+async function fetchServerFunction(base, id, args) {
+  const instance = `server-fn:${INSTANCE++}`;
+  const response = await (args.length === 1 && args[0] instanceof FormData
+    ? createRequest(base, id, instance, args[0])
+    : createRequest(base, id, instance, JSON.stringify(await toJSONAsync(args)), "application/json"));
 
-  if (response.status === 200) {
-    return json;
-  } else {
-    console.log(json);
-    throw { message: json.error };
+  if (response.headers.get("Location")) throw response;
+  if (response.headers.get("X-Revalidate")) {
+    /* ts-ignore-next-line */
+    response.customBody = () => {
+      return deserializeStream(instance, response);
+    }
+    throw response;
+  }
+  const result = deserializeStream(instance, response);
+  if (response.ok) {
+    return result;
   }
+  throw result;
 }
 
 export function createServerReference(fn, id, name) {
@@ -30,7 +94,7 @@ export function createServerReference(fn, id, name) {
       }
     },
     apply(target, thisArg, args) {
-      return fetchServerAction("/_server", `${id}#${name}`, args);
+      return fetchServerFunction("/_server", `${id}#${name}`, args);
     }
   });
 }

package/env.d.ts

@@ -0,0 +1,23 @@
+// This file is an augmentation to the built-in ImportMeta interface
+// Thus cannot contain any top-level imports
+// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
+
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+interface ImportMetaEnv extends Record<`VITE_${string}`, any>, SolidStartMetaEnv {
+  BASE_URL: string;
+  MODE: string;
+  DEV: boolean;
+  PROD: boolean;
+  SSR: boolean;
+}
+
+interface SolidStartMetaEnv {
+  START_ISLANDS_ROUTER: string;
+  START_INDEX_HTML: string;
+  START_ENTRY_CLIENT: string;
+  START_SSR: string;
+  START_ISLANDS: string;
+  START_ENTRY_SERVER: string;
+  DEBUG: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.0-alpha.0",
+  "version": "0.4.0-alpha.2",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -38,15 +38,19 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.4",
-    "vinxi": "0.0.47"
+    "solid-js": "^1.8.7",
+    "vinxi": "0.0.48"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "0.0.39",
-    "@vinxi/server-functions": "0.0.39",
-    "@vinxi/server-components": "0.0.39",
+    "@vinxi/plugin-directives": "0.0.44",
+    "@vinxi/server-components": "0.0.44",
+    "@vinxi/server-functions": "0.0.45",
     "defu": "^6.1.2",
+    "seroval": "^0.14.1",
     "vite-plugin-inspect": "^0.7.33",
-    "vite-plugin-solid": "^2.7.0"
+    "vite-plugin-solid": "^2.8.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --checkJs false --skipLibCheck"
   }
 }

package/server/StartServer.tsx

@@ -1,14 +1,15 @@
 // @ts-ignore
 import App from "#start/app";
-import { Hydration, HydrationScript, NoHydration, ssr } from "solid-js/web";
+import type { Component } from "solid-js";
+import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
+import type { DocumentComponentProps } from "./types";
 
 const docType = ssr("<!DOCTYPE html>");
 
-export function StartServer(props) {
-  const context = props.context;
-  const parsed = new URL(context.request.url);
-  const path = parsed.pathname + parsed.search;
+export function StartServer(props: { document: Component<DocumentComponentProps> }) {
+  const context = getRequestEvent() as any;
   return (
     <NoHydration>
       {docType as unknown as any}
@@ -31,10 +32,14 @@ export function StartServer(props) {
       >
         {!import.meta.env.START_ISLANDS ? (
           <Hydration>
-            <App />
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
           </Hydration>
         ) : (
-          <App />
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>
         )}
       </props.document>
     </NoHydration>

package/server/handler.tsx

@@ -1,10 +1,20 @@
 import { renderToStream } from "solid-js/web";
+/* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, EventHandlerObject, EventHandlerRequest, H3Event } from "vinxi/server";
-import { createRoutes } from "../shared/FileRoutes";
-import { apiRoutes } from "../shared/routes";
+import {
+  EventHandlerObject,
+  EventHandlerRequest,
+  H3Event,
+  HTTPMethod,
+  eventHandler,
+  sendRedirect,
+  setHeader,
+  setResponseStatus
+} from "vinxi/server";
+import { matchAPIRoute } from "../shared/routes";
 import { getFetchEvent } from "./middleware";
-import { FetchEvent, FETCH_EVENT, PageEvent } from "./types";
+import { createPageEvent } from "./page-event";
+import { APIEvent, FetchEvent, PageEvent } from "./types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -12,6 +22,8 @@ export function createHandler(
     nonce?: string;
     renderId?: string;
     timeoutMs?: number;
+    onCompleteAll?: (options: { write: (v: any) => void }) => void;
+    onCompleteShell?: (options: { write: (v: any) => void }) => void;
     createPageEvent?: (event: FetchEvent) => Promise<PageEvent>;
     onRequest?: EventHandlerObject["onRequest"];
     onBeforeResponse?: EventHandlerObject["onBeforeResponse"];
@@ -25,22 +37,34 @@ export function createHandler(
 
       return provideRequestEvent(event, async () => {
         // api
-        const match = apiRoutes.find(
-          route =>
-            route[`$${event.request.method}`] && new URL(event.request.url).pathname === route.path
-        );
+        const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method as HTTPMethod)
         if (match) {
-          const mod = await match[`$${event.request.method}`].import();
+          const mod = await match.handler.import();
           const fn = mod[event.request.method];
-          const result = await fn(event);
-          return result;
+          (event as APIEvent).params = match.params;
+          return await fn(event);
         }
 
         // render stream
         const context = await createPageEvent(event);
-        const stream = renderToStream(() => fn(context), options);
-        if (context.response && context.response.url) {
-          return event.redirect(context.response.url);
+        let cloned = { ...options };
+        if (cloned.onCompleteAll) {
+          const og = cloned.onCompleteAll;
+          cloned.onCompleteAll = options => {
+            handleStreamCompleteRedirect(context)(options);
+            og(options);
+          };
+        } else cloned.onCompleteAll = handleStreamCompleteRedirect(context);
+        if (cloned.onCompleteShell) {
+          const og = cloned.onCompleteShell;
+          cloned.onCompleteShell = options => {
+            handleShellCompleteRedirect(context, e)();
+            og(options);
+          };
+        } else cloned.onCompleteShell = handleShellCompleteRedirect(context, e);
+        const stream = renderToStream(() => fn(context), cloned);
+        if (context.response && context.response.headers.get("Location")) {
+          return sendRedirect(event, context.response.headers.get("Location"));
         }
         return { pipeTo: stream.pipeTo };
       });
@@ -48,25 +72,18 @@ export function createHandler(
   });
 }
 
-export async function createPageEvent(ctx: FetchEvent) {
-  const clientManifest = import.meta.env.MANIFEST["client"];
-  const serverManifest = import.meta.env.MANIFEST["ssr"];
-  const prevPath = ctx.request.headers.get("x-solid-referrer");
-  const mutation = ctx.request.headers.get("x-solid-mutation") === "true";
-  const pageEvent: PageEvent = Object.assign(ctx, {
-    manifest: await clientManifest.json(),
-    assets: [
-      ...(await clientManifest.inputs[clientManifest.handler].assets()),
-      ...(import.meta.env.START_ISLANDS
-        ? await serverManifest.inputs[serverManifest.handler].assets()
-        : [])
-    ],
-    routes: createRoutes(),
-    prevUrl: prevPath || "",
-    mutation: mutation,
-    $type: FETCH_EVENT,
-    $islands: new Set<string>()
-  });
+function handleShellCompleteRedirect(context: PageEvent, e: H3Event<EventHandlerRequest>) {
+  return () => {
+    if (context.response && context.response.headers.get("Location")) {
+      setResponseStatus(e, 302);
+      setHeader(e, "Location", context.response.headers.get("Location"));
+    }
+  }
+}
 
-  return pageEvent;
+function handleStreamCompleteRedirect(context: PageEvent) {
+  return ({ write }: { write: (html: string) => void }) => {
+    const to = context.response && context.response.headers.get("Location");
+    to && write(`<script>window.location="${to}"</script>`);
+  };
 }

package/server/index.tsx

@@ -1,4 +1,14 @@
+export * from "vinxi/server";
 export { StartServer } from "./StartServer";
-export { createHandler } from "./handler";
 export * from "./middleware";
-export type { DocumentComponentProps } from "./types";
+export * from "./types";
+import { createHandler as createBaseHandler } from "./handler";
+import { createPageEvent } from "./page-event";
+import type { PageEvent } from "./types";
+
+export function createHandler(
+  fn: (context: PageEvent) => unknown,
+  options: Parameters<typeof createBaseHandler>[1] = {}
+) {
+  return createBaseHandler(fn, { ...options, createPageEvent });
+}

package/server/middleware.ts

@@ -1,45 +1,37 @@
 import {
-  appendResponseHeader,
   defineMiddleware,
   EventHandlerRequest,
   getRequestIP,
-  getResponseHeader,
-  getResponseStatus,
   H3Event,
-  removeResponseHeader,
-  sendRedirect,
   sendWebResponse,
-  setResponseHeader,
-  setResponseStatus,
   toWebRequest
 } from "vinxi/server";
 import { FetchEvent } from "./types";
 
-export * from "vinxi/server";
-
 const h3EventSymbol = Symbol("h3Event");
 const fetchEventSymbol = Symbol("fetchEvent");
+const eventTraps = {
+  get(target, prop) {
+    if (prop === fetchEventSymbol) return target;
+    return target[prop] ?? target[h3EventSymbol][prop];
+  }
+};
 
 export function createFetchEvent(event: H3Event<EventHandlerRequest>): FetchEvent {
-  return {
-    request: toWebRequest(event),
-    clientAddress: getRequestIP(event),
-    locals: {},
-    redirect: (url, status) => sendRedirect(event, url, status),
-    getResponseStatus: () => getResponseStatus(event),
-    setResponseStatus: (code, text) => setResponseStatus(event, code, text),
-    getResponseHeader: name => getResponseHeader(event, name),
-    setResponseHeader: (name, value) => setResponseHeader(event, name, value),
-    appendResponseHeader: (name, value) => appendResponseHeader(event, name, value),
-    removeResponseHeader: name => removeResponseHeader(event, name),
-    // @ts-ignore
-    [h3EventSymbol]: event
-  };
+  return new Proxy(
+    {
+      request: toWebRequest(event),
+      clientAddress: getRequestIP(event),
+      locals: {},
+      // @ts-ignore
+      [h3EventSymbol]: event
+    },
+    eventTraps
+  ) as unknown as FetchEvent;
 }
 
-export function getH3Event(fetchEvent: FetchEvent): H3Event<EventHandlerRequest> {
-  // @ts-ignore
-  return fetchEvent[h3EventSymbol];
+export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
+  return new Proxy({ ...fetchEvent[fetchEventSymbol] }, eventTraps);
 }
 
 export function getFetchEvent(h3Event: H3Event): FetchEvent {
@@ -52,28 +44,11 @@ export function getFetchEvent(h3Event: H3Event): FetchEvent {
   return h3Event[fetchEventSymbol];
 }
 
-export type Middleware = (input: MiddlewareInput) => MiddlewareFn;
-/** Input parameters for to an Exchange factory function. */
-
-export interface MiddlewareInput {
-  forward: MiddlewareFn;
-}
 /** 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 const composeMiddleware =
-  (exchanges: Middleware[]) =>
-  ({ forward }: MiddlewareInput) =>
-    exchanges.reduceRight(
-      (forward, exchange) =>
-        exchange({
-          forward
-        }),
-      forward
-    );
-
 type RequestMiddleware = (event: FetchEvent) => Response | Promise<Response> | void | Promise<void>;
 
 type ResponseMiddleware = (

package/server/page-event.tsx

@@ -0,0 +1,42 @@
+import { getCookie, setCookie, setResponseHeader } from "vinxi/server";
+import { createRoutes } from "../shared/FileRoutes";
+import { FetchEvent, PageEvent } from "./types";
+
+function initFromFlash(ctx: FetchEvent) {
+  const flash = getCookie(ctx, "flash");
+  if (!flash) return;
+  let param = JSON.parse(flash);
+  if (!param || !param.result) return [];
+  const input = [...param.input.slice(0, -1), new Map(param.input[param.input.length - 1])];
+  setCookie(ctx, "flash", "", { maxAge: 0 });
+  return {
+    url: param.url,
+    result: param.error ? new Error(param.result) : param.result,
+    input
+  };
+}
+
+export async function createPageEvent(ctx: FetchEvent) {
+  const clientManifest = import.meta.env.MANIFEST["client"];
+  const serverManifest = import.meta.env.MANIFEST["ssr"];
+  setResponseHeader(ctx, "Content-Type", "text/html");
+  // const prevPath = ctx.request.headers.get("x-solid-referrer");
+  // const mutation = ctx.request.headers.get("x-solid-mutation") === "true";
+  const pageEvent: PageEvent = Object.assign(ctx, {
+    manifest: await clientManifest.json(),
+    assets: [
+      ...(await clientManifest.inputs[clientManifest.handler].assets()),
+      ...(import.meta.env.START_ISLANDS
+        ? await serverManifest.inputs[serverManifest.handler].assets()
+        : [])
+    ],
+    initialSubmission: initFromFlash(ctx),
+    routes: createRoutes(),
+    // prevUrl: prevPath || "",
+    // mutation: mutation,
+    // $type: FETCH_EVENT,
+    $islands: new Set<string>()
+  });
+
+  return pageEvent;
+}

package/server/spa/StartServer.tsx

@@ -1,11 +1,11 @@
 // @ts-ignore
-import { NoHydration, ssr } from "solid-js/web";
+import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
 import { renderAsset } from "../renderAsset";
 
 const docType = ssr("<!DOCTYPE html>");
 
 export function StartServer(props) {
-  const context = props.context;
+  const context = getRequestEvent() as any;
   return (
     <NoHydration>
       {docType as unknown as any}
@@ -14,6 +14,7 @@ export function StartServer(props) {
         scripts={
           <>
             <script innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`} />
+            <script>$R = [];</script>
             <script
               type="module"
               src={

package/server/spa/handler.tsx

@@ -1,5 +1,5 @@
 import { createHandler as createBaseHandler } from "../handler";
-import { FetchEvent, FETCH_EVENT, PageEvent } from "../types";
+import { FetchEvent, PageEvent } from "../types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -14,9 +14,9 @@ export async function createPageEvent(ctx: FetchEvent) {
     manifest: await clientManifest.json(),
     assets: [...(await clientManifest.inputs[clientManifest.handler].assets())],
     routes: [],
-    prevUrl: "",
-    mutation: false,
-    $type: FETCH_EVENT,
+    // prevUrl: "",
+    // mutation: false,
+    // $type: FETCH_EVENT,
     $islands: new Set<string>()
   });
 

package/server/types.ts

@@ -1,10 +1,11 @@
 import { JSX } from "solid-js";
+import { EventHandlerRequest, H3Event } from "vinxi/server";
 
-export const FETCH_EVENT = "$FETCH";
+// export const FETCH_EVENT = "$FETCH";
 
 export type DocumentComponentProps = {
-  assets: any;
-  scripts: any;
+  assets: JSX.Element;
+  scripts: JSX.Element;
   children: JSX.Element;
 }
 
@@ -15,44 +16,32 @@ export type ContextMatches = {
   params: unknown;
 };
 
-type TagDescription = {
-  tag: string;
-  props: Record<string, unknown>;
-};
-
-type RouterContext = {
-  // router matches;
-  matches: ContextMatches[][];
-  // redirected url
-  url: string;
-
-  // server route fragments
-  replaceOutletId: string;
-  newOutletId: string;
-  partial: boolean;
-  nextRoute: any;
-  prevRoute: any;
-};
-
-export interface FetchEvent {
+export interface FetchEvent extends H3Event<EventHandlerRequest> {
   request: Request;
   clientAddress: string;
   locals: Record<string, unknown>;
-  redirect(url: string, status?: number): void;
-  getResponseStatus(): number;
-  setResponseStatus(code: number, text?: string): void;
-  getResponseHeader(name: string): string | number | string[];
-  setResponseHeader(name: string, value: string): void;
-  appendResponseHeader(name: string, value: string): void;
-  removeResponseHeader(name: string): void;
 }
 export interface PageEvent extends FetchEvent {
   manifest: any;
   assets: any;
   routes: any[];
-  prevUrl: string | null;
-  $type: typeof FETCH_EVENT;
+  // prevUrl: string | null;
+  // $type: typeof FETCH_EVENT;
   $islands: Set<string>;
-  mutation: boolean;
+  // mutation: boolean;
   response?: Response;
 }
+
+export interface APIEvent extends FetchEvent {
+  params: { [key: string]: string };
+}
+
+export interface APIHandler {
+  (event: APIEvent): Promise<any>;
+}
+
+declare module "solid-js/web" {
+  interface RequestEvent extends FetchEvent {
+    serverOnly?: boolean;
+  }
+}

package/shared/FileRoutes.tsx

@@ -1,6 +1,8 @@
+/* @refresh skip */
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 
+import { PageEvent } from "../server";
 import { pageRoutes as routeConfigs } from "./routes";
 
 export function createRoutes() {
@@ -24,5 +26,5 @@ export function createRoutes() {
 
 let routes;
 export const FileRoutes = () => {
-  return isServer ? getRequestEvent().routes : (routes || (routes = createRoutes()));
+  return isServer ? (getRequestEvent() as PageEvent).routes : (routes || (routes = createRoutes()));
 };

package/shared/HttpHeader.tsx

@@ -1,17 +1,18 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import { appendResponseHeader, getResponseHeader, removeResponseHeader, setResponseHeader } from "vinxi/server";
 
 export function HttpHeader(props: { name: string; value: string; append?: boolean }) {
   if (isServer) {
-    const pageContext = getRequestEvent();
+    const event = getRequestEvent();
     if (props.append) {
-      pageContext!.appendResponseHeader(props.name, props.value);
+      appendResponseHeader(event, props.name, props.value);
     } else {
-      pageContext!.setResponseHeader(props.name, props.value);
+      setResponseHeader(event, props.name, props.value);
     }
 
     onCleanup(() => {
-      const value = pageContext!.getResponseHeader(props.name);
+      const value = getResponseHeader(event, props.name);
 
       // Todo: review this logic still the same in H3
       // H3 supports arrays so its possible there is no need to split..
@@ -20,8 +21,8 @@ export function HttpHeader(props: { name: string; value: string; append?: boolea
         const values = value.split(", ");
         const index = values.indexOf(props.value);
         index !== -1 && values.splice(index, 1);
-        if (values.length) pageContext!.setResponseHeader(props.name, values.join(", "));
-        else pageContext!.removeResponseHeader(props.name);
+        if (values.length) setResponseHeader(event, props.name, values.join(", "));
+        else removeResponseHeader(event, props.name);
       }
     });
   }

package/shared/HttpStatusCode.tsx

@@ -1,12 +1,13 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import { setResponseStatus } from "vinxi/server";
 
 export function HttpStatusCode(props: { code: number, text?: string }) {
   if (isServer) {
-    const context = getRequestEvent();
-    context!.setResponseStatus(props.code, props.text);
+    const context = getRequestEvent()!;
+    setResponseStatus(context, props.code, props.text);
     onCleanup(() => {
-      context!.setResponseStatus(200);
+      setResponseStatus(context, 200);
     });
   }
   return null;

package/shared/index.tsx

@@ -1,5 +1,4 @@
 export { default as clientOnly } from "./clientOnly";
-export { ErrorBoundary as DefaultErrorBoundary } from "./ErrorBoundary";
 export { FileRoutes } from "./FileRoutes";
 export { HttpHeader } from "./HttpHeader";
 export { HttpStatusCode } from "./HttpStatusCode";

package/shared/routes.ts

@@ -1,4 +1,22 @@
-import fileRoutes, { Route } from "vinxi/routes";
+import fileRoutes from "vinxi/routes";
+import { HTTPMethod } from "vinxi/server";
+
+interface Route {
+  path: string;
+  type: "api" | "page";
+  children?: Route[];
+}
+
+type MatchRoute = Route & {
+  score: number;
+  params: {
+    type: "*" | ":";
+    name: string;
+    index: number;
+  }[];
+  matchSegments: (string | null)[];
+  wildcard: boolean;
+};
 
 declare module "vinxi/routes" {
   export interface Register {
@@ -10,7 +28,52 @@ declare module "vinxi/routes" {
   }
 }
 
-const defineRoutes = (fileRoutes: Route[]) => {
+export const pageRoutes = defineRoutes((fileRoutes as unknown as Route[]).filter(o => o.type === "page"));
+export const apiRoutes = defineAPIRoutes((fileRoutes as unknown as Route[]).filter(o => o.type === "api"));
+
+export function matchAPIRoute(path: string, method: HTTPMethod) {
+  const segments = path.split("/").filter(Boolean);
+
+  routeLoop: for (const route of apiRoutes) {
+    const matchSegments = route.matchSegments;
+
+    if (
+      segments.length < matchSegments.length ||
+      (!route.wildcard && segments.length > matchSegments.length)
+    ) {
+      continue;
+    }
+
+    for (let index = 0; index < matchSegments.length; index++) {
+      const match = matchSegments[index];
+      if (!match) {
+        continue;
+      }
+
+      if (segments[index] !== match) {
+        continue routeLoop;
+      }
+    }
+
+    const handler = route[`$${method}`];
+    if (handler === "skip" || handler === undefined) {
+      return;
+    }
+
+    const params: Record<string, string> = {};
+    for (const { type, name, index } of route.params) {
+      if (type === ":") {
+        params[name] = segments[index];
+      } else {
+        params[name] = segments.slice(index).join("/");
+      }
+    }
+
+    return { handler, params };
+  }
+}
+
+function defineRoutes(fileRoutes: Route[]) {
   function processRoute(routes: Route[], route: Route, id: string, full: string) {
     const parentRoute = Object.values(routes).find(o => {
       // if (o.id.endsWith("/index")) {
@@ -40,5 +103,78 @@ const defineRoutes = (fileRoutes: Route[]) => {
     }, []);
 };
 
-export const pageRoutes = defineRoutes(fileRoutes.filter(o => o.type === "page"));
-export const apiRoutes = fileRoutes.filter(o => o.type === "api");
+function defineAPIRoutes(routes: Route[]) {
+  return routes
+    .flatMap(route => {
+      const paths = expandOptionals(route.path);
+      return paths.map(path => ({ ...route, path }));
+    })
+    .map(routeToMatchRoute)
+    .sort((a, b) => b.score - a.score);
+}
+
+// This is copied from https://github.com/solidjs/solid-router/blob/main/src/utils.ts
+function expandOptionals(pattern: string): string[] {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match) return [pattern];
+
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes: string[] = [prefix, (prefix += match[1])];
+
+  // This section handles adjacent optional params. We don't actually want all permuations since
+  // that will lead to equivalent apiRwhich have the same number of params. For example
+  // `/:a?/:b?/:c`? only has the unique expansion: `/`, `/:a`, `/:a/:b`, `/:a/:b/:c` and we can
+  // discard `/:b`, `/:c`, `/:b/:c` by building them up in order and not recursing. This also helps
+  // ensure predictability where earlier params have precidence.
+  while ((match = /^(\/\:[^\/]+)\?/.exec(suffix))) {
+    prefixes.push((prefix += match[1]));
+    suffix = suffix.slice(match[0].length);
+  }
+
+  return expandOptionals(suffix).reduce<string[]>(
+    (results, expansion) => [...results, ...prefixes.map(p => p + expansion)],
+    []
+  );
+}
+
+function routeToMatchRoute(route: Route): MatchRoute {
+  const segments = route.path.split("/").filter(Boolean);
+
+  const params: { type: "*" | ":"; name: string; index: number }[] = [];
+  const matchSegments: (string | null)[] = [];
+  let score = 0;
+  let wildcard = false;
+
+  for (const [index, segment] of segments.entries()) {
+    if (segment[0] === ":") {
+      const name = segment.slice(1);
+      score += 3;
+      params.push({
+        type: ":",
+        name,
+        index
+      });
+      matchSegments.push(null);
+    } else if (segment[0] === "*") {
+      score -= 1;
+      params.push({
+        type: "*",
+        name: segment.slice(1),
+        index
+      });
+      wildcard = true;
+    } else {
+      score += 4;
+      matchSegments.push(segment);
+    }
+  }
+
+  return {
+    ...route,
+    score,
+    params,
+    matchSegments,
+    wildcard
+  };
+}