@solidjs/start 0.4.0-alpha.1 → 0.4.0-alpha.11

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/config/index.d.ts

@@ -0,0 +1,14 @@
+import { InlineConfig } from "vite";
+
+type SolidStartInlineConfig = Omit<InlineConfig, "router"> & {
+    start?: {
+        ssr?: boolean | "async",
+        extensions?: string[],
+        server?: any,
+        appRoot?: string,
+        middleware?: string,
+        //islands?: boolean TODO: Get PROD bugs working probably missing release
+    }
+}
+
+export declare function defineConfig(baseConfig: SolidStartInlineConfig)

package/config/index.js

@@ -1,6 +1,7 @@
 import { serverFunctions } from "@vinxi/server-functions/plugin";
 import { serverTransform } from "@vinxi/server-functions/server";
 import defu from "defu";
+import { existsSync } from "node:fs";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createApp, resolve } from "vinxi";
@@ -37,20 +38,29 @@ function solidStartServerFsRouter(config) {
 }
 
 export function defineConfig(baseConfig = {}) {
-  let { plugins = [], ssr = true, start = {}, ...userConfig } = baseConfig;
+  let { plugins = [], start = {}, ...userConfig } = baseConfig;
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   start = defu(start, {
     appRoot: "./src",
-    ssr,
+    ssr: true,
     islands: false,
-    serverPlugins: []
+    solid: {}
   });
+  let server = start.server;
+  if (!start.ssr) {
+    server = { ...server, prerender: { routes: ["/"] } };
+  }
+  let entryExtension = ".tsx"
+  if (existsSync(join(process.cwd(), start.appRoot, "app.jsx"))) {
+    entryExtension = ".jsx"
+  }
 
   return createApp({
     server: {
       compressPublicAssets: {
         brotli: true
-      }
+      },
+      ...server
     },
     routers: [
       {
@@ -63,7 +73,7 @@ export function defineConfig(baseConfig = {}) {
       {
         name: "ssr",
         mode: "handler",
-        handler: `${start.appRoot}/entry-server.tsx`,
+        handler: `${start.appRoot}/entry-server${entryExtension}`,
         middleware: start.middleware,
         routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         extensions,
@@ -75,23 +85,25 @@ export function defineConfig(baseConfig = {}) {
             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}`) }),
+          solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
             resolve: {
               alias: {
-                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "#start/app": join(process.cwd(), start.appRoot, `app${entryExtension}`),
                 "~": join(process.cwd(), start.appRoot),
                 ...(!start.ssr
                   ? {
                       "@solidjs/start/server": "@solidjs/start/server/spa"
                     }
-                  : {})
+                  : {}),
+                ...userConfig.resolve?.alias
               }
             },
             define: {
               "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
               "import.meta.env.SSR": JSON.stringify(true),
-              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+              ...userConfig.define
             }
           })
         ]
@@ -99,7 +111,7 @@ export function defineConfig(baseConfig = {}) {
       {
         name: "client",
         mode: "build",
-        handler: `${start.appRoot}/entry-client.tsx`,
+        handler: `${start.appRoot}/entry-client${entryExtension}`,
         ...(start.islands
           ? {}
           : {
@@ -114,11 +126,11 @@ export function defineConfig(baseConfig = {}) {
             runtime: normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)))
           }),
           start.islands ? serverComponents.client() : null,
-          solid({ ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
+          solid({ ...start.solid, ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-client", {
             resolve: {
               alias: {
-                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "#start/app": join(process.cwd(), start.appRoot, `app${entryExtension}`),
                 "~": join(process.cwd(), start.appRoot),
                 ...(start.islands
                   ? {
@@ -129,13 +141,15 @@ export function defineConfig(baseConfig = {}) {
                   ? {
                       "@solidjs/start/client": "@solidjs/start/client/spa"
                     }
-                  : {})
+                  : {}),
+                ...userConfig.resolve?.alias
               }
             },
             define: {
               "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
               "import.meta.env.SSR": JSON.stringify(false),
-              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+              ...userConfig.define
             }
           })
         ],
@@ -148,23 +162,25 @@ export function defineConfig(baseConfig = {}) {
         plugins: () => [
           config("user", userConfig),
           ...plugins,
-          solid({ ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
+          solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
             resolve: {
               alias: {
-                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "#start/app": join(process.cwd(), start.appRoot, `app${entryExtension}`),
                 "~": join(process.cwd(), start.appRoot),
                 ...(!start.ssr
                   ? {
                       "@solidjs/start/server": "@solidjs/start/server/spa"
                     }
-                  : {})
+                  : {}),
+                ...userConfig.resolve?.alias
               }
             },
             define: {
               "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
               "import.meta.env.SSR": JSON.stringify(true),
-              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+              ...userConfig.define
             }
           })
         ],

package/config/server-fns-runtime.jsx

@@ -1,3 +1,7 @@
+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) {
@@ -6,7 +10,13 @@ export function createServerReference(fn, id, name) {
       }
     },
     apply(target, thisArg, args) {
-      return fn.apply(thisArg, args);
+      const ogEvt = getRequestEvent();
+      if (!ogEvt) throw new Error("Cannot call server function outside of a request");
+      const evt = cloneEvent(ogEvt);
+      evt.serverOnly = true;
+      return provideRequestEvent(evt, () => {
+        return fn.apply(thisArg, args);
+      });
     }
   });
 }

package/config/server-handler.js

@@ -53,13 +53,19 @@ async function handleServerFunction(event) {
   const action = (
     await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
   )[name];
-  let parsed;
+  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 = [await readFormData(event)];
+    parsed.push(await readFormData(event));
   } else {
     parsed = fromJSON(await readBody(event));
   }
@@ -70,21 +76,16 @@ async function handleServerFunction(event) {
     if (!instance) {
       const isError = result instanceof Error;
       const refererUrl = new URL(getHeader(event, "referer"));
-      if (result !== undefined)
-        refererUrl.searchParams.set(
-          "form",
-          JSON.stringify({
-            url: url.pathname + url.search,
-            result: isError ? result.message : result,
-            error: isError,
-            entries: [...parsed[0].entries()]
-          })
-        );
-      else refererUrl.searchParams.delete("form");
       return new Response(null, {
         status: 302,
         headers: {
-          Location: refererUrl.pathname + refererUrl.search
+          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;`} : {})
         }
       });
     }

package/config/server-runtime.jsx

@@ -69,7 +69,7 @@ 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"));
+    : createRequest(base, id, instance, JSON.stringify(await Promise.resolve(toJSONAsync(args))), "application/json"));
 
   if (response.headers.get("Location")) throw response;
   if (response.headers.get("X-Revalidate")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.11",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -13,7 +13,7 @@
     "shared",
     "*.d.ts"
   ],
-  "types": "./index.tsx",
+  "types": "./shared/index.tsx",
   "exports": {
     ".": "./shared/index.tsx",
     "./config": "./config/index.js",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "solid-js": "^1.8.7",
-    "vinxi": "0.0.48"
+    "vinxi": "0.0.52"
   },
   "dependencies": {
     "@vinxi/plugin-directives": "0.0.44",
@@ -48,6 +48,9 @@
     "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,7 +1,14 @@
 // @ts-ignore
 import App from "#start/app";
 import type { Component } from "solid-js";
-import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import {
+  Hydration,
+  HydrationScript,
+  NoHydration,
+  getRequestEvent,
+  ssr,
+  useAssets
+} from "solid-js/web";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
 import type { DocumentComponentProps } from "./types";
@@ -10,6 +17,32 @@ const docType = ssr("<!DOCTYPE html>");
 
 export function StartServer(props: { document: Component<DocumentComponentProps> }) {
   const context = getRequestEvent() as any;
+
+  let assets = [];
+  Promise.resolve().then(async () => {
+    let current = context.routes;
+    if (context.routerMatches && context.routerMatches[0]) {
+      for (let i = 0; i < context.routerMatches[0].length; i++) {
+        const match = context.routerMatches[0][i];
+        if (match.metadata && match.metadata.filesystem) {
+          const segment = current.find(r => r.path === match.path);
+          const part = import.meta.env.MANIFEST["client"].inputs[segment["$component"].src];
+          const asset = await part.assets();
+          assets.push.apply(assets, asset);
+          current = segment.children;
+        }
+      }
+    }
+    // dedupe assets
+    assets = [...new Map(assets.map(item => [item.attrs.key, item])).values()].filter(
+      asset =>
+        asset.attrs.rel === "modulepreload" &&
+        !context.assets.find(a => a.attrs.key === asset.attrs.key)
+    );
+  });
+
+  useAssets(() => assets.length ? assets.map(m => renderAsset(m)) : undefined);
+
   return (
     <NoHydration>
       {docType as unknown as any}

package/server/handler.tsx

@@ -1,17 +1,20 @@
 import { renderToStream } from "solid-js/web";
+/* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import {
-  eventHandler,
   EventHandlerObject,
   EventHandlerRequest,
   H3Event,
+  HTTPMethod,
+  eventHandler,
+  sendRedirect,
   setHeader,
   setResponseStatus
 } from "vinxi/server";
-import { apiRoutes } from "../shared/routes";
+import { matchAPIRoute } from "../shared/routes";
 import { getFetchEvent } from "./middleware";
 import { createPageEvent } from "./page-event";
-import { FetchEvent, PageEvent } from "./types";
+import { APIEvent, FetchEvent, PageEvent } from "./types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -34,18 +37,16 @@ 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 doAsync = import.meta.env.START_SSR === "async";
         const context = await createPageEvent(event);
         let cloned = { ...options };
         if (cloned.onCompleteAll) {
@@ -64,9 +65,13 @@ export function createHandler(
         } else cloned.onCompleteShell = handleShellCompleteRedirect(context, e);
         const stream = renderToStream(() => fn(context), cloned);
         if (context.response && context.response.headers.get("Location")) {
-          return event.redirect(context.response.headers.get("Location"));
+          return sendRedirect(event, context.response.headers.get("Location"));
         }
-        return { pipeTo: stream.pipeTo };
+        if (doAsync) return stream;
+        // fix cloudflare streaming
+        const { writable, readable } = new TransformStream();
+        stream.pipeTo(writable);
+        return readable;
       });
     }
   });

package/server/index.tsx

@@ -1,8 +1,9 @@
+export * from "vinxi/server";
 export { StartServer } from "./StartServer";
 export * from "./middleware";
-export type { DocumentComponentProps } from "./types";
-import { createPageEvent } from "./page-event";
+export * from "./types";
 import { createHandler as createBaseHandler } from "./handler";
+import { createPageEvent } from "./page-event";
 import type { PageEvent } from "./types";
 
 export function createHandler(

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 {

package/server/page-event.tsx

@@ -1,10 +1,33 @@
+import {
+  appendResponseHeader,
+  getCookie,
+  getResponseHeader,
+  removeResponseHeader,
+  setCookie,
+  setResponseHeader,
+  setResponseStatus
+} 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"];
-  ctx.setResponseHeader("Content-Type", "text/html");
+  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, {
@@ -15,7 +38,36 @@ export async function createPageEvent(ctx: FetchEvent) {
         ? await serverManifest.inputs[serverManifest.handler].assets()
         : [])
     ],
+    initialSubmission: initFromFlash(ctx),
     routes: createRoutes(),
+    components: {
+      status: props => {
+        setResponseStatus(ctx, props.code, props.text);
+        return () => setResponseStatus(ctx, 200);
+      },
+      header: props => {
+        if (props.append) {
+          appendResponseHeader(ctx, props.name, props.value);
+        } else {
+          setResponseHeader(ctx, props.name, props.value);
+        }
+
+        return () => {
+          const value = getResponseHeader(ctx, props.name);
+
+          // Todo: review this logic still the same in H3
+          // H3 supports arrays so its possible there is no need to split..
+          // typeof check here is to guard but ultimately may be unneeded
+          if (value && typeof value === "string") {
+            const values = value.split(", ");
+            const index = values.indexOf(props.value);
+            index !== -1 && values.splice(index, 1);
+            if (values.length) setResponseHeader(ctx, props.name, values.join(", "));
+            else removeResponseHeader(ctx, props.name);
+          }
+        };
+      }
+    },
     // prevUrl: prevPath || "",
     // mutation: mutation,
     // $type: FETCH_EVENT,

package/server/spa/StartServer.tsx

@@ -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/spa/index.tsx

@@ -1,4 +1,6 @@
+export * from "vinxi/server";
 export * from "../handler";
 export * from "../middleware";
+export * from "../types";
 export { StartServer } from "./StartServer";
 

package/server/types.ts

@@ -1,4 +1,5 @@
 import { JSX } from "solid-js";
+import { EventHandlerRequest, H3Event } from "vinxi/server";
 
 // export const FETCH_EVENT = "$FETCH";
 
@@ -15,17 +16,10 @@ export type ContextMatches = {
   params: unknown;
 };
 
-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;
@@ -37,3 +31,17 @@ export interface PageEvent extends FetchEvent {
   // 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

@@ -2,6 +2,7 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 
+import { PageEvent } from "../server";
 import { pageRoutes as routeConfigs } from "./routes";
 
 export function createRoutes() {
@@ -9,6 +10,7 @@ export function createRoutes() {
     return {
       ...route,
       ...(route.$$route ? route.$$route.require().route : undefined),
+      metadata: { ...(route.$$route ? route.$$route.require().route.metadata : {}), filesystem: true },
       component: lazyRoute(
         route.$component,
         import.meta.env.START_ISLANDS
@@ -25,5 +27,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

@@ -3,27 +3,8 @@ import { getRequestEvent, isServer } from "solid-js/web";
 
 export function HttpHeader(props: { name: string; value: string; append?: boolean }) {
   if (isServer) {
-    const pageContext = getRequestEvent();
-    if (props.append) {
-      pageContext!.appendResponseHeader(props.name, props.value);
-    } else {
-      pageContext!.setResponseHeader(props.name, props.value);
-    }
-
-    onCleanup(() => {
-      const value = pageContext!.getResponseHeader(props.name);
-
-      // Todo: review this logic still the same in H3
-      // H3 supports arrays so its possible there is no need to split..
-      // typeof check here is to guard but ultimately may be unneeded
-      if (value && typeof value === "string") {
-        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);
-      }
-    });
+    const event = getRequestEvent();
+    if (event) onCleanup((event as any).components.header(props));
   }
 
   return null;

package/shared/HttpStatusCode.tsx

@@ -3,11 +3,8 @@ import { getRequestEvent, isServer } from "solid-js/web";
 
 export function HttpStatusCode(props: { code: number, text?: string }) {
   if (isServer) {
-    const context = getRequestEvent();
-    context!.setResponseStatus(props.code, props.text);
-    onCleanup(() => {
-      context!.setResponseStatus(200);
-    });
+    const event = getRequestEvent();
+    if (event) onCleanup((event as any).components.status(props));
   }
   return null;
 }

package/shared/lazyRoute.tsx

@@ -47,9 +47,10 @@ export default function lazyRoute(
 			const mod = await component.import();
 			const Component = mod[exported];
 			let assets = await clientManifest.inputs?.[component.src].assets();
+			const styles = assets.filter((asset) => asset.tag === "style" || asset.attrs.rel === "stylesheet");
 			const Comp = (props) => {
 				return [
-					...assets.map((asset) => renderAsset(asset)),
+					...styles.map((asset) => renderAsset(asset)),
 					createComponent(Component, props),
 				];
 			};

package/shared/routes.ts

@@ -1,11 +1,24 @@
-import fileRoutes, { RouteModule } from "vinxi/routes";
+import fileRoutes from "vinxi/routes";
+import { HTTPMethod } from "vinxi/server";
 
 interface Route {
   path: string;
+  id: 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 {
     route: {
@@ -16,23 +29,65 @@ declare module "vinxi/routes" {
   }
 }
 
-const defineRoutes = (fileRoutes: RouteModule[]) => {
+export const pageRoutes = defineRoutes((fileRoutes as unknown as Route[]).filter(o => o.type === "page"));
+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")) {
-      // 	return false;
-      // }
-      return id.startsWith(o.path + "/");
+      return id.startsWith(o.id + "/");
     });
 
     if (!parentRoute) {
-      routes.push({ ...route, path: id });
+      routes.push({ ...route, id, path: id.replace(/\/\([^)/]+\)/g, "") });
       return routes;
     }
     processRoute(
       parentRoute.children || (parentRoute.children = []),
       route,
-      id.slice(parentRoute.path.length),
+      id.slice(parentRoute.id.length),
       full
     );
 
@@ -44,7 +99,80 @@ const defineRoutes = (fileRoutes: RouteModule[]) => {
     .reduce((prevRoutes, route) => {
       return processRoute(prevRoutes, route, route.path, route.path);
     }, []);
-};
+}
+
+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);
+  }
 
-export const pageRoutes = defineRoutes(fileRoutes.filter(o => o.type === "page"));
-export const apiRoutes = fileRoutes.filter(o => o.type === "api");
+  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
+  };
+}