@solidjs/start 0.5.5 → 0.5.6

package/client/StartClient.tsx

@@ -1,9 +1,10 @@
 // @ts-ignore
 import App from "#start/app";
+import type { JSX } from "solid-js";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import "./mount";
 
-function Dummy(props) {
+function Dummy(props: { children: JSX.Element }) {
   return props.children;
 }
 

package/client/mount.ts

@@ -1,7 +1,8 @@
+import type { JSX } from "solid-js";
 import { createStore } from "solid-js/store";
-import { createComponent, getHydrationKey, getOwner, hydrate } from "solid-js/web";
+import { createComponent, getHydrationKey, getOwner, hydrate, type MountableElement } from "solid-js/web";
 
-export function mount(fn, el) {
+export function mount(fn: () => JSX.Element, el: MountableElement) {
   if (import.meta.env.START_ISLANDS) {
     const map = new WeakMap();
     async function mountIsland(el: HTMLElement) {
@@ -19,11 +20,11 @@ export function mount(fn, el) {
 
       let mod = await import(
         /* @vite-ignore */
-        import.meta.env.MANIFEST["client"].chunks[el.dataset.id.split("#")[0]].output.path
+        import.meta.env.MANIFEST["client"]!.chunks[el.dataset.id!.split("#")[0] as string]!.output.path
       );
       if (!mod || !el.dataset.hk) return;
 
-      let Component = mod[el.dataset.id.split("#")[1]];
+      let Component = mod[el.dataset.id!.split("#")[1] as string];
       let hk = el.dataset.hk;
       // _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
 
@@ -68,7 +69,7 @@ export function mount(fn, el) {
       Promise.all(
         [...assets].map(
           asset =>
-            import(/* @vite-ignore */import.meta.env.MANIFEST["client"].chunks[asset.split("#")[0]].output.path)
+            import(/* @vite-ignore */import.meta.env.MANIFEST["client"]!.chunks[asset.split("#")[0] as string]!.output.path)
         )
       )
         .then(() => {

package/client/spa/index.tsx

@@ -1,7 +1,8 @@
-import { render } from "solid-js/web";
+import type { JSX } from "solid-js";
+import { render, type MountableElement } from "solid-js/web";
 import "vinxi/client";
 
-export function mount(fn, el) {
+export function mount(fn: () => JSX.Element, el: MountableElement) {
   render(fn, el);
 }
 

package/config/index.js

@@ -1,5 +1,5 @@
 import { serverFunctions } from "@vinxi/server-functions/plugin";
-import { serverTransform } from "@vinxi/server-functions/server";
+import { server as serverFunctionServer, serverTransform } from "@vinxi/server-functions/server";
 import defu from "defu";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
@@ -8,10 +8,7 @@ import { createApp, resolve } from "vinxi";
 import { normalize } from "vinxi/lib/path";
 import { config } from "vinxi/plugins/config";
 import solid from "vite-plugin-solid";
-import {
-  SolidStartClientFileRouter,
-  SolidStartServerFileRouter
-} from "./fs-router.js";
+import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
 import { serverComponents } from "./server-components.js";
 
 const DEFAULT_EXTENSIONS = ["js", "jsx", "ts", "tsx"];
@@ -120,6 +117,7 @@ export function defineConfig(baseConfig = {}) {
                 ...userConfig.resolve?.alias
               }
             },
+            cacheDir: "node_modules/.vinxi/server",
             define: {
               "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
               "import.meta.env.SSR": JSON.stringify(true),
@@ -176,6 +174,7 @@ export function defineConfig(baseConfig = {}) {
                 ...userConfig.resolve?.alias
               }
             },
+            cacheDir: "node_modules/.vinxi/client",
             define: {
               "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
               "import.meta.env.SSR": JSON.stringify(false),
@@ -187,9 +186,13 @@ export function defineConfig(baseConfig = {}) {
         ],
         base: "/_build"
       },
-      serverFunctions.router({
+
+      {
+        name: "server-fns",
+        type: "http",
+        base: "/_server",
         handler: normalize(fileURLToPath(new URL("./server-handler.ts", import.meta.url))),
-        runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.ts", import.meta.url))),
+        target: "server",
         routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         plugins: async () => [
           config("user", {
@@ -201,10 +204,13 @@ export function defineConfig(baseConfig = {}) {
                 "@solidjs/start > source-map-js",
                 "@solidjs/start > error-stack-parser"
               ]
-            }
+            },
+            cacheDir: "node_modules/.vinxi/server-fns"
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
-
+          serverFunctionServer({
+            runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.ts", import.meta.url)))
+          }),
           solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
             resolve: {
@@ -228,7 +234,7 @@ export function defineConfig(baseConfig = {}) {
           })
         ],
         middleware: start.middleware
-      })
+      }
     ]
   });
 }

package/config/server-fns-runtime.ts

@@ -2,7 +2,7 @@ import { getRequestEvent } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
 import { cloneEvent } from "../server/fetchEvent";
 
-export function createServerReference(fn, id, name) {
+export function createServerReference(fn: Function, id: string, name: string) {
   if (typeof fn !== "function") throw new Error("Export from a 'use server' module must be a function");
   const baseURL = import.meta.env.SERVER_BASE_URL;
   return new Proxy(fn, {

package/config/server-handler.ts

@@ -14,9 +14,9 @@ import {
   URLSearchParamsPlugin
 } from "seroval-plugins/web";
 import { sharedConfig } from "solid-js";
-import { renderToStringAsync } from "solid-js/web";
+import { renderToStream } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, setHeader, setResponseStatus } from "vinxi/http";
+import { eventHandler, setHeader, setResponseStatus, type H3Event } from "vinxi/http";
 import invariant from "vinxi/lib/invariant";
 import { cloneEvent, getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
 import { createPageEvent } from "../server/pageEvent";
@@ -24,14 +24,14 @@ import { createPageEvent } from "../server/pageEvent";
 import App from "#start/app";
 import { FetchEvent, PageEvent } from "../server";
 
-function createChunk(data) {
+function createChunk(data: string) {
   const bytes = data.length;
   const baseHex = bytes.toString(16);
   const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex; // 32-bit
   return new TextEncoder().encode(`;0x${totalHex};${data}`);
 }
 
-function serializeToStream(id, value) {
+function serializeToStream(id: string, value: any) {
   return new ReadableStream({
     start(controller) {
       crossSerializeStream(value, {
@@ -64,7 +64,7 @@ function serializeToStream(id, value) {
   });
 }
 
-async function handleServerFunction(h3Event) {
+async function handleServerFunction(h3Event: H3Event) {
   const event = getFetchEvent(h3Event);
   const request = event.request;
 
@@ -83,32 +83,32 @@ async function handleServerFunction(h3Event) {
   }
 
   const serverFunction = (
-    await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
-  )[name];
-  let parsed = [];
+    await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME]!.chunks[filepath!]!.import()
+  )[name!];
+  let parsed: any[] = [];
 
   // grab bound arguments from url when no JS
   if (!instance || h3Event.method === "GET") {
     const args = url.searchParams.get("args");
-    if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
+    if (args) JSON.parse(args).forEach((arg: any) => parsed.push(arg));
   }
   if (h3Event.method === "POST") {
     const contentType = request.headers.get("content-type");
     if (
-      contentType.startsWith("multipart/form-data") ||
-      contentType.startsWith("application/x-www-form-urlencoded")
+      contentType?.startsWith("multipart/form-data") ||
+      contentType?.startsWith("application/x-www-form-urlencoded")
     ) {
       // workaround for https://github.com/unjs/nitro/issues/1721
       // (issue only in edge runtimes)
       parsed.push(
-        await new Request(request, { ...request, body: h3Event.node.req.body }).formData()
+        await new Request(request, { ...request, body: (h3Event.node.req as any).body }).formData()
       );
       // what should work when #1721 is fixed
       // parsed.push(await request.formData);
     } else {
       // workaround for https://github.com/unjs/nitro/issues/1721
       // (issue only in edge runtimes)
-      const tmpReq = new Request(request, { ...request, body: h3Event.node.req.body });
+      const tmpReq = new Request(request, { ...request, body: (h3Event.node.req as any).body });
       // what should work when #1721 is fixed
       // just use request.json() here
       parsed = fromJSON(await tmpReq.json(), {
@@ -150,7 +150,7 @@ async function handleServerFunction(h3Event) {
     // handle no JS success case
     if (!instance) {
       const isError = result instanceof Error;
-      const refererUrl = new URL(request.headers.get("referer"));
+      const refererUrl = new URL(request.headers.get("referer")!);
       return new Response(null, {
         status: 302,
         headers: {
@@ -184,14 +184,14 @@ async function handleServerFunction(h3Event) {
 }
 
 async function handleSingleFlight(sourceEvent: FetchEvent, result: any) {
-  let revalidate;
-  let url = new URL(sourceEvent.request.headers.get("referer")).toString();
+  let revalidate: string[];
+  let url = new URL(sourceEvent.request.headers.get("referer")!).toString();
   if (result instanceof Response) {
     if (result.headers.has("X-Revalidate"))
-      revalidate = result.headers.get("X-Revalidate").split(",");
+      revalidate = result.headers.get("X-Revalidate")!.split(",");
     if (result.headers.has("Location"))
       url = new URL(
-        result.headers.get("Location"),
+        result.headers.get("Location")!,
         new URL(sourceEvent.request.url).origin + import.meta.env.SERVER_BASE_URL
       ).toString();
   }
@@ -205,9 +205,9 @@ async function handleSingleFlight(sourceEvent: FetchEvent, result: any) {
     event.router.previousUrl = sourceEvent.request.headers.get("referer");
     (async () => {
       try {
-        await renderToStringAsync(() => {
+        await renderToStream(() => {
           /* @ts-ignore */
-          sharedConfig.context = { event };
+          sharedConfig.context.event = event;
           App();
         });
       } catch (e) {

package/config/server-runtime.ts

@@ -11,13 +11,14 @@ import {
   URLPlugin,
   URLSearchParamsPlugin
 } from "seroval-plugins/web";
+import { type Component } from "solid-js";
 import { createIslandReference } from "../server/islands";
 
 class SerovalChunkReader {
   reader: ReadableStreamDefaultReader<Uint8Array>;
   buffer: string;
   done: boolean;
-  constructor(stream) {
+  constructor(stream: ReadableStream<Uint8Array>) {
     this.reader = stream.getReader();
     this.buffer = "";
     this.done = false;
@@ -34,7 +35,7 @@ class SerovalChunkReader {
     }
   }
 
-  async next() {
+  async next(): Promise<any> {
     // Check if the buffer is empty
     if (this.buffer === "") {
       // if we are already done...
@@ -84,7 +85,7 @@ class SerovalChunkReader {
   }
 }
 
-async function deserializeStream(id, response) {
+async function deserializeStream(id: string, response: Response) {
   if (!response.body) {
     throw new Error("missing body");
   }
@@ -184,7 +185,7 @@ async function fetchServerFunction(
   throw result;
 }
 
-export function createServerReference(fn, id, name) {
+export function createServerReference(fn: Function, id: string, name: string) {
   const baseURL = import.meta.env.SERVER_BASE_URL;
   return new Proxy(fn, {
     get(target, prop, receiver) {
@@ -196,7 +197,7 @@ export function createServerReference(fn, id, name) {
       }
       if (prop === "withOptions") {
         return (options: RequestInit) => {
-          const fn = (...args) => {
+          const fn = (...args: any[]) => {
             const encodeArgs = options.method && options.method.toUpperCase() === "GET";
             return fetchServerFunction(
               encodeArgs
@@ -218,7 +219,7 @@ export function createServerReference(fn, id, name) {
   });
 }
 
-export function createClientReference(Component, id, name) {
+export function createClientReference(Component: Component<any>, id: string, name: string) {
   if (typeof Component === "function") {
     return createIslandReference(Component, id, name);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {

package/server/StartServer.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import App from "#start/app";
-import type { Component } from "solid-js";
+import type { Component, JSX } from "solid-js";
 import {
   Hydration,
   HydrationScript,
@@ -11,15 +11,15 @@ import {
 } from "solid-js/web";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
-import type { DocumentComponentProps } from "./types";
+import type { Asset, DocumentComponentProps, PageEvent } from "./types";
 
 const docType = ssr("<!DOCTYPE html>");
 
-function matchRoute(matches, routes, matched = []) {
+function matchRoute(matches: any[], routes: any[], matched = []): any[] | undefined {
   for (let i = 0; i < routes.length; i++) {
     const segment = routes[i];
     if (segment.path !== matches[0].path) continue;
-    let next = [...matched, segment];
+    let next: any = [...matched, segment];
     if (segment.children) {
       const nextMatches = matches.slice(1);
       if (nextMatches.length === 0) continue;
@@ -31,11 +31,13 @@ function matchRoute(matches, routes, matched = []) {
 }
 
 export function StartServer(props: { document: Component<DocumentComponentProps> }) {
-  const context = getRequestEvent() as any;
+  const context = getRequestEvent() as PageEvent;
 
-  let assets = [];
+  let assets: Asset[] = [];
   Promise.resolve().then(async () => {
+    // @ts-ignore
     if (context.router && context.router.matches) {
+      // @ts-ignore
       const matches = [...context.router.matches];
       while (matches.length && (!matches[0].info || !matches[0].info.filesystem))
         matches.shift();
@@ -43,9 +45,9 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
       if (matched) {
         for (let i = 0; i < matched.length; i++) {
           const segment = matched[i];
-          const part = import.meta.env.MANIFEST[import.meta.env.START_ISLANDS ? "ssr" : "client"]
-            .inputs[segment["$component"].src];
-          const asset = await part.assets();
+          const part = import.meta.env.MANIFEST[import.meta.env.START_ISLANDS ? "ssr" : "client"]!
+            .inputs[segment["$component"].src]!;
+          const asset = await part.assets() as any;
           assets.push.apply(assets, asset);
         }
       } else console.warn("No route matched for preloading js assets");
@@ -54,8 +56,8 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
     assets = [...new Map(assets.map(item => [item.attrs.key, item])).values()].filter(asset =>
       import.meta.env.START_ISLANDS
         ? false
-        : asset.attrs.rel === "modulepreload" &&
-          !context.assets.find(a => a.attrs.key === asset.attrs.key)
+        : (asset.attrs as JSX.LinkHTMLAttributes<HTMLLinkElement>).rel === "modulepreload" &&
+          !context.assets.find((a: Asset) => a.attrs.key === asset.attrs.key)
     );
   });
 
@@ -68,7 +70,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
         assets={
           <>
             <HydrationScript />
-            {context.assets.map(m => renderAsset(m))}
+            {context.assets.map((m: any) => renderAsset(m))}
           </>
         }
         scripts={
@@ -78,9 +80,9 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
               type="module"
               async
               src={
-                import.meta.env.MANIFEST["client"].inputs[
-                  import.meta.env.MANIFEST["client"].handler
-                ].output.path
+                import.meta.env.MANIFEST["client"]!.inputs[
+                  import.meta.env.MANIFEST["client"]!.handler
+                ]!.output.path
               }
             />
           </>

package/server/fetchEvent.ts

@@ -1,5 +1,6 @@
 import {
   H3Event,
+  HTTPEvent,
   HTTPEventSymbol,
   appendResponseHeader,
   getRequestIP,
@@ -37,15 +38,15 @@ export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
 }
 
 export function getFetchEvent(h3Event: H3Event): FetchEvent {
-  if (!h3Event[fetchEventSymbol]) {
+  if (!(h3Event as any)[fetchEventSymbol]) {
     const fetchEvent = createFetchEvent(h3Event);
-    h3Event[fetchEventSymbol] = fetchEvent;
+    (h3Event as any)[fetchEventSymbol] = fetchEvent;
   }
 
-  return h3Event[fetchEventSymbol];
+  return (h3Event as any)[fetchEventSymbol];
 }
 
-export function mergeResponseHeaders(h3Event, headers) {
+export function mergeResponseHeaders(h3Event: HTTPEvent, headers: Headers) {
   for (const [key, value] of headers.entries()) {
     setHeader(h3Event, key, value);
   }

package/server/handler.ts

@@ -31,7 +31,7 @@ export function createBaseHandler(
   return eventHandler({
     onRequest: options.onRequest,
     onBeforeResponse: options.onBeforeResponse,
-    handler: (e: H3Event<EventHandlerRequest> & { startEvent: FetchEvent }) => {
+    handler: (e: H3Event<EventHandlerRequest>) => {
       const event = getFetchEvent(e);
       const mode = import.meta.env.START_SSR;
 
@@ -41,7 +41,7 @@ export function createBaseHandler(
         if (match) {
           const mod = await match.handler.import();
           const fn = mod[event.request.method];
-          (event as APIEvent).params = match.params;
+          (event as APIEvent).params = match.params || {};
           // @ts-ignore
           sharedConfig.context = { event };
           const res = await fn(event);
@@ -61,7 +61,7 @@ export function createBaseHandler(
             return fn(context);
           }, options);
           if (context.response && context.response.headers.get("Location")) {
-            return sendRedirect(event, context.response.headers.get("Location"));
+            return sendRedirect(event, context.response.headers.get("Location")!);
           }
           return html;
         }
@@ -85,7 +85,7 @@ export function createBaseHandler(
           return fn(context);
         }, cloned);
         if (context.response && context.response.headers.get("Location")) {
-          return sendRedirect(event, context.response.headers.get("Location"));
+          return sendRedirect(event, context.response.headers.get("Location")!);
         }
         if (mode === "async") return stream;
         // fix cloudflare streaming
@@ -101,7 +101,7 @@ function handleShellCompleteRedirect(context: PageEvent, e: H3Event<EventHandler
   return () => {
     if (context.response && context.response.headers.get("Location")) {
       setResponseStatus(e, 302);
-      setHeader(e, "Location", context.response.headers.get("Location"));
+      setHeader(e, "Location", context.response.headers.get("Location")!);
     }
   };
 }

package/server/pageEvent.ts

@@ -20,17 +20,17 @@ function initFromFlash(ctx: FetchEvent) {
 }
 
 export async function createPageEvent(ctx: FetchEvent) {
-  const clientManifest = import.meta.env.MANIFEST["client"];
-  const serverManifest = import.meta.env.MANIFEST["ssr"];
+  const clientManifest = import.meta.env.MANIFEST["client"]!;
+  const serverManifest = import.meta.env.MANIFEST["ssr"]!;
   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 pageEvent: PageEvent = Object.assign(ctx, {
     manifest: await clientManifest.json(),
     assets: [
-      ...(await clientManifest.inputs[clientManifest.handler].assets()),
+      ...(await clientManifest.inputs[clientManifest.handler]!.assets()),
       ...(import.meta.env.START_ISLANDS
-        ? (await serverManifest.inputs[serverManifest.handler].assets()).filter(
+        ? (await serverManifest.inputs[serverManifest.handler]!.assets()).filter(
             s => (s as any).attrs.rel !== "modulepreload"
           )
         : [])

package/server/renderAsset.tsx

@@ -1,16 +1,21 @@
+import type { JSX } from "solid-js";
+import type { Asset } from "./types";
+
 const assetMap = {
-	style: (props) => <style {...props.attrs}>{props.children}</style>,
-	link: (props) => <link {...props.attrs} />,
-	script: (props) => {
-		return props.attrs.src ? (
-			<script {...props.attrs} id={props.key}>
-				{" "}
-			</script>
-		) : null;
-	},
+  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;
+  }
 };
 
-export function renderAsset(asset) {
-	let { tag, attrs: { key, ...attrs } = { key: undefined }, children } = asset;
-	return assetMap[tag]({ attrs, key, children });
-}
+export function renderAsset(asset: Asset) {
+  let { tag, attrs: { key, ...attrs } = { key: undefined }, children } = asset as any;
+  return (assetMap as any)[tag]({ attrs, key, children });
+}

package/server/spa/StartServer.tsx

@@ -1,18 +1,20 @@
 // @ts-ignore
+import type { Component } from "solid-js";
 import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
 import { renderAsset } from "../renderAsset";
+import type { DocumentComponentProps, PageEvent } from "../types";
 
 const docType = ssr("<!DOCTYPE html>");
 
-export function StartServer(props) {
-  const context = getRequestEvent() as any;
+export function StartServer(props: { document: Component<DocumentComponentProps> }) {
+  const context = getRequestEvent() as PageEvent;
   return (
     <NoHydration>
       {docType as unknown as any}
       <props.document
         assets={
           <>
-            {context.assets.map(m => renderAsset(m))}
+            {context.assets.map((m: any) => renderAsset(m))}
           </>
         }
         scripts={
@@ -21,9 +23,9 @@ export function StartServer(props) {
             <script
               type="module"
               src={
-                import.meta.env.MANIFEST["client"].inputs[
-                  import.meta.env.MANIFEST["client"].handler
-                ].output.path
+                import.meta.env.MANIFEST["client"]!.inputs[
+                  import.meta.env.MANIFEST["client"]!.handler
+                ]!.output.path
               }
             />
           </>

package/server/spa/handler.ts

@@ -9,10 +9,10 @@ export function createHandler(
 }
 
 export async function createPageEvent(ctx: FetchEvent) {
-  const clientManifest = import.meta.env.MANIFEST["client"];
+  const clientManifest = import.meta.env.MANIFEST["client"]!;
   const pageEvent: PageEvent = Object.assign(ctx, {
     manifest: await clientManifest.json(),
-    assets: [...(await clientManifest.inputs[clientManifest.handler].assets())],
+    assets: [...(await clientManifest.inputs[clientManifest.handler]!.assets())],
     routes: [],
     // prevUrl: "",
     // mutation: false,

package/server/types.ts

@@ -1,13 +1,26 @@
 import type { JSX } from "solid-js";
-import { HTTPEventSymbol, type EventHandlerRequest, type H3Event } from "vinxi/http";
+import { RequestEvent } from "solid-js/web";
+import { H3Event, HTTPEventSymbol } from "vinxi/http";
 
 // export const FETCH_EVENT = "$FETCH";
 
 export type DocumentComponentProps = {
   assets: JSX.Element;
   scripts: JSX.Element;
-  children: JSX.Element;
-}
+  children?: JSX.Element;
+};
+
+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 };
+};
 
 export type ContextMatches = {
   originalPath: string;
@@ -24,15 +37,15 @@ export interface ResponseStub {
 export interface FetchEvent {
   request: Request;
   response: ResponseStub;
-  clientAddress: string;
+  clientAddress?: string;
   locals: RequestEventLocals;
-  nativeEvent: H3Event<EventHandlerRequest>;
-  [HTTPEventSymbol]: H3Event<EventHandlerRequest>;
+  nativeEvent: H3Event;
+  [HTTPEventSymbol]: H3Event;
 }
 export interface RequestEventLocals {
   [key: string | symbol]: any;
 }
-export interface PageEvent extends FetchEvent {
+export interface PageEvent extends RequestEvent {
   manifest: any;
   assets: any;
   routes: any[];

package/shared/FileRoutes.tsx

@@ -2,11 +2,12 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 
+import type { Route } from "vinxi/fs-router";
 import type { PageEvent } from "../server/types";
 import { pageRoutes as routeConfigs } from "./routes";
 
 export function createRoutes() {
-  function createRoute(route) {
+  function createRoute(route: Route) {
     return {
       ...route,
       ...(route.$$route ? route.$$route.require().route : undefined),
@@ -28,7 +29,7 @@ export function createRoutes() {
   return routes;
 }
 
-let routes;
+let routes: any[];
 export const FileRoutes = () => {
   return isServer ? (getRequestEvent() as PageEvent).routes : routes || (routes = createRoutes());
 };

package/shared/HttpHeader.tsx

@@ -1,9 +1,10 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import type { PageEvent } from "../server/types";
 
 export function HttpHeader(props: { name: string; value: string; append?: boolean }) {
   if (isServer) {
-    const event = getRequestEvent();
+    const event = getRequestEvent() as PageEvent;
 
     if (props.append) event.response.headers.append(props.name, props.value);
     else event.response.headers.set(props.name, props.value);

package/shared/HttpStatusCode.tsx

@@ -1,9 +1,10 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import type { PageEvent } from "../server/types";
 
 export function HttpStatusCode(props: { code: number, text?: string }) {
   if (isServer) {
-    const event = getRequestEvent();
+    const event = getRequestEvent() as PageEvent;
     event.response.status = props.code;
     event.response.statusText = props.text;
     onCleanup(() => !event.nativeEvent.handled && (event.response.status = 200));

package/shared/dev-overlay/CodeView.tsx

@@ -58,7 +58,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
   ) ,async (value) => {
     const highlighter = await loadHighlighter();
     const lang = props.fileName
-      .split(/[#?]/)[0]
+      .split(/[#?]/)[0]!
       .split('.')
       .pop()
       ?.trim() as BuiltinLanguage;
@@ -76,7 +76,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       const lines = ref.querySelectorAll('span[class="line"]');
 
       for (let i = 0, len = lines.length; i < len; i++) {
-        const el = lines[i];
+        const el = lines[i] as HTMLElement;
         if ((props.line - minLine() - 1) === i) {
           el.classList.add('dev-overlay-error-line');
         }

package/shared/dev-overlay/DevOverlayDialog.tsx

@@ -6,7 +6,7 @@ import { Portal } from 'solid-js/web';
 import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from 'terracotta';
 import info from '../../package.json';
 import { CodeView } from './CodeView';
-import { type StackFrameSource, createStackFrame } from './createStackFrame';
+import { createStackFrame, type StackFrameSource } from './createStackFrame';
 import download from './download';
 import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon } from './icons';
 import './styles.css';
@@ -21,7 +21,7 @@ interface ErrorInfoProps {
 
 function ErrorInfo(props: ErrorInfoProps): JSX.Element {
   return (
-    <Show when={props.error instanceof Error && props.error} keyed fallback={<span>{props.error.toString()}</span>}>
+    <Show when={props.error instanceof Error && props.error} keyed fallback={<span>{(props.error as Error).toString()}</span>}>
       {(current) => (
         <span class="dev-overlay-error-info">
           <span class="dev-overlay-error-info-name">{current.name}</span>
@@ -41,7 +41,7 @@ function getFileName(source: string): string {
   try {
     const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
     const paths = path.pathname.split('/');
-    return paths[paths.length - 1];
+    return paths[paths.length - 1]!;
   } catch (error) {
     return getFileName(`/${source}`);
   }
@@ -62,7 +62,7 @@ function CodeFallback(): JSX.Element {
 function StackFramesContent(props: StackFramesContentProps) {
   const stackframes = ErrorStackParser.parse(props.error);
 
-  const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
+  const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]!);
 
   return (
       <div class="dev-overlay-stack-frames-content">
@@ -98,10 +98,10 @@ function StackFramesContent(props: StackFramesContentProps) {
               <div class="dev-overlay-stack-frame">
                 <span class="dev-overlay-stack-frame-function">{current.functionName ?? '<anonymous>'}</span>
                 <span class="dev-overlay-stack-frame-file">{getFilePath({
-                  source: current.getFileName(),
+                  source: current.getFileName()!,
                   content: '',
-                  line: current.getLineNumber(),
-                  column: current.getColumnNumber(),
+                  line: current.getLineNumber()!,
+                  column: current.getColumnNumber()!,
                   name: current.getFunctionName(),
                 })}</span>
               </div>
@@ -204,11 +204,11 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
     url.searchParams.append('labels', 'needs+triage');
     url.searchParams.append('template', 'bug.yml');
     url.searchParams.append('title', `[Bug?]:` + props.errors[truncated() - 1].toString());
-    window.open(url, '_blank').focus();
+    window.open(url, '_blank')!.focus();
   }
 
   function redirectToDiscord() {
-    window.open(DISCORD_INVITE, '_blank').focus();
+    window.open(DISCORD_INVITE, '_blank')!.focus();
   }
 
   return (

package/shared/dev-overlay/createStackFrame.ts

@@ -1,4 +1,4 @@
-import { type Accessor, createMemo, createResource } from "solid-js";
+import { createMemo, createResource, type Accessor } from "solid-js";
 import getSourceMap from "./get-source-map";
 
 export interface StackFrameSource {
@@ -19,7 +19,7 @@ function getActualFileSource(path: string): string {
 export function createStackFrame(
   stackframe: StackFrame,
   isCompiled: () => boolean,
-): Accessor<StackFrameSource> {
+) {
   const [data] = createResource(
     () => ({
       fileName: stackframe.fileName,
@@ -45,14 +45,13 @@ export function createStackFrame(
     },
   );
 
-  const info = createMemo<StackFrameSource>(() => {
+  const info = createMemo(() => {
     const current = data();
     if (!current) {
       return undefined;
     }
     const { source, content, sourceMap } = current;
 
-    
     if (!isCompiled() && source.line && source.column && sourceMap) {
       const result = sourceMap.originalPositionFor({
         line: source.line,
@@ -62,7 +61,7 @@ export function createStackFrame(
       return {
         ...result,
         content: sourceMap.sourceContentFor(result.source),
-      };
+      } as StackFrameSource;
     }
 
     return {
@@ -71,8 +70,8 @@ export function createStackFrame(
       column: source.column,
       name: source.functionName,
       content,
-    };
+    } as StackFrameSource;
   });
 
-  return info;
+  return info as Accessor<StackFrameSource>;
 }

package/shared/dev-overlay/get-source-map.ts

@@ -11,7 +11,7 @@ export default async function getSourceMap(
   const lines = content.split('\n');
   let sourceMapUrl: string | undefined;
   for (let i = lines.length - 1; i >= 0 && !sourceMapUrl; i--) {
-    const result = lines[i].match(SOURCEMAP_REGEX);
+    const result = lines[i]!.match(SOURCEMAP_REGEX);
     if (result) {
       sourceMapUrl = result[1];
     }

package/shared/lazyRoute.tsx

@@ -1,10 +1,11 @@
 /// <reference types="vinxi/types/client" />
-import { createComponent, lazy, onCleanup } from "solid-js";
-import { appendStyles, cleanupStyles, updateStyles, preloadStyles } from "vinxi/css";
+import { createComponent, lazy, onCleanup, type Component, type JSX } from "solid-js";
+import { appendStyles, cleanupStyles, preloadStyles, updateStyles } from "vinxi/css";
 
 import { renderAsset } from "../server/renderAsset";
+import { Asset } from "../server/types";
 
-export default function lazyRoute(component, clientManifest, serverManifest, exported = "default") {
+export default function lazyRoute<T>(component: any, clientManifest: any, serverManifest: any, exported = "default") {
   return lazy(async () => {
     if (import.meta.env.DEV) {
       let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
@@ -13,7 +14,7 @@ export default function lazyRoute(component, clientManifest, serverManifest, exp
       if (!mod[exported]) console.error(`Module ${component.src} does not export ${exported}`);
       const Component = mod[exported];
       let assets = await clientManifest.inputs?.[component.src].assets();
-      const styles = assets.filter(asset => asset.tag === "style");
+      const styles = assets.filter((asset: Asset) => asset.tag === "style");
 
       if (typeof window !== "undefined" && import.meta.hot) {
         import.meta.hot.on("css-update", data => {
@@ -21,7 +22,7 @@ export default function lazyRoute(component, clientManifest, serverManifest, exp
         });
       }
 
-      const Comp = props => {
+      const Comp: Component<T> = props => {
         if (typeof window !== "undefined") {
           appendStyles(styles);
         }
@@ -32,7 +33,7 @@ export default function lazyRoute(component, clientManifest, serverManifest, exp
             cleanupStyles(styles);
           }
         });
-        return [...assets.map(asset => renderAsset(asset)), createComponent(Component, props)];
+        return [...assets.map((asset: Asset) => renderAsset(asset)), createComponent(Component, props)];
       };
       return { default: Comp };
     } else {
@@ -40,13 +41,13 @@ export default function lazyRoute(component, clientManifest, serverManifest, exp
       const Component = mod[exported];
       let assets = await clientManifest.inputs?.[component.src].assets();
       const styles = assets.filter(
-        asset => asset.tag === "style" || asset.attrs.rel === "stylesheet"
+        (asset: Asset) => asset.tag === "style" || (asset.attrs as JSX.LinkHTMLAttributes<HTMLLinkElement>).rel === "stylesheet"
       );
       if (typeof window !== "undefined") {
         preloadStyles(styles);
       }
-      const Comp = props => {
-        return [...styles.map(asset => renderAsset(asset)), createComponent(Component, props)];
+      const Comp: Component<T> = props => {
+        return [...styles.map((asset: Asset) => renderAsset(asset)), createComponent(Component, props)];
       };
       return { default: Comp };
     }

package/shared/routes.ts

@@ -6,6 +6,11 @@ interface Route {
   id: string;
   children?: Route[];
   $component?: any;
+  $GET?: any;
+  $POST?: any;
+  $PUT?: any;
+  $PATCH?: any;
+  $DELETE?: any;
 }
 
 declare module "vinxi/routes" {
@@ -43,7 +48,7 @@ function defineRoutes(fileRoutes: Route[]) {
 
   return fileRoutes
     .sort((a, b) => a.path.length - b.path.length)
-    .reduce((prevRoutes, route) => {
+    .reduce((prevRoutes: Route[], route) => {
       return processRoute(prevRoutes, route, route.path, route.path);
     }, []);
 }
@@ -73,7 +78,7 @@ const router = createRouter({
     }
     if (memo[path]) {
       throw new Error(
-        `Duplicate API routes for "${path}" found at "${memo[path].route.path}" and "${route.path}"`
+        `Duplicate API routes for "${path}" found at "${memo[path]!.route.path}" and "${route.path}"`
       );
     }
     memo[path] = { route };