@solidjs/start 0.4.9 → 0.4.11

package/config/index.js

@@ -73,6 +73,9 @@ export function defineConfig(baseConfig = {}) {
       {
         name: "ssr",
         mode: "handler",
+        link: {
+          client: "client"
+        },
         handler: `${start.appRoot}/entry-server${entryExtension}`,
         middleware: start.middleware,
         routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
@@ -85,10 +88,10 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
 
@@ -138,10 +141,10 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
           serverFunctions.client({
@@ -189,10 +192,10 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
 

package/config/server-fns-runtime.jsx

@@ -3,12 +3,14 @@ import { provideRequestEvent } from "solid-js/web/storage";
 import { cloneEvent } from "../server/middleware";
 
 export function createServerReference(fn, id, name) {
+  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, {
     get(target, prop, receiver) {
       if (prop === "url") {
         return `${baseURL}/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
       }
+      if (prop === "GET") return receiver;
     },
     apply(target, thisArg, args) {
       const ogEvt = getRequestEvent();

package/config/server-handler.js

@@ -16,12 +16,16 @@ import { sharedConfig } from "solid-js";
 /* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import invariant from "vinxi/lib/invariant";
-import {
-  eventHandler,
-  setHeader
-} from "vinxi/server";
+import { eventHandler, setHeader } from "vinxi/server";
 import { getFetchEvent } from "../server/middleware";
 
+function createChunk(data) {
+  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) {
   return new ReadableStream({
     start(controller) {
@@ -40,15 +44,14 @@ function serializeToStream(id, value) {
           URLPlugin
         ],
         onSerialize(data, initial) {
-          const result = initial ? `(${getCrossReferenceHeader(id)},${data})` : data;
-          controller.enqueue(new TextEncoder().encode(`${result};\n`));
+          controller.enqueue(
+            createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data)
+          );
         },
         onDone() {
-          // controller.enqueue(`delete $R["${id}"];\n`);
           controller.close();
         },
         onError(error) {
-          // controller.enqueue(`delete $R["${id}"];\n`);
           controller.error(error);
         }
       });
@@ -57,7 +60,6 @@ function serializeToStream(id, value) {
 }
 
 async function handleServerFunction(h3Event) {
-  invariant(h3Event.method === "POST", `Invalid method ${h3Event.method}. Expected POST.`);
   const event = getFetchEvent(h3Event);
   const request = event.request;
 
@@ -80,39 +82,71 @@ async function handleServerFunction(h3Event) {
   let parsed = [];
 
   // grab bound arguments from url when no JS
-  if (!instance) {
+  if (!instance || h3Event.method === "GET") {
     const args = url.searchParams.get("args");
     if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
   }
-  const contentType = request.headers.get("content-type");
-  if (
-    contentType.startsWith("multipart/form-data") ||
-    contentType.startsWith("application/x-www-form-urlencoded")
-  ) {
-    parsed.push(await request.formData());
-  } else {
-    parsed = fromJSON(await request.json(), {
-      plugins: [
-        CustomEventPlugin,
-        DOMExceptionPlugin,
-        EventPlugin,
-        FormDataPlugin,
-        HeadersPlugin,
-        ReadableStreamPlugin,
-        RequestPlugin,
-        ResponsePlugin,
-        URLSearchParamsPlugin,
-        URLPlugin
-      ]
-    });
+  if (h3Event.method === "POST") {
+    const contentType = request.headers.get("content-type");
+    if (
+      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: event.node.req.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: event.node.req.body })
+      // what should work when #1721 is fixed
+      // just use request.json() here
+      parsed = fromJSON(await tmpReq.json(), {
+        plugins: [
+          CustomEventPlugin,
+          DOMExceptionPlugin,
+          EventPlugin,
+          FormDataPlugin,
+          HeadersPlugin,
+          ReadableStreamPlugin,
+          RequestPlugin,
+          ResponsePlugin,
+          URLSearchParamsPlugin,
+          URLPlugin
+        ]
+      });
+    }
   }
   try {
-    const result = await provideRequestEvent(event, () => {
+    let result = await provideRequestEvent(event, () => {
       /* @ts-ignore */
       sharedConfig.context = { event };
       return action(...parsed);
     });
 
+    // handle responses
+    if (result instanceof Response) {
+      if (result.status === 302) {
+        return new Response(null, {
+          status: instance ? 204 : 302,
+          headers: {
+            Location: result.headers.get("Location")
+          }
+        });
+      }
+      // forward headers
+      if (result.headers) {
+        for (const [key, value] of result.headers.entries()) {
+          setHeader(h3Event, key, value);
+        }
+      }
+      if (result.customBody) {
+        result = await result.customBody();
+      } else if (result.body == undefined) result = undefined;
+    }
+
     // handle no JS success case
     if (!instance) {
       const isError = result instanceof Error;
@@ -138,13 +172,24 @@ async function handleServerFunction(h3Event) {
     setHeader(h3Event, "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")
+    if (x instanceof Response) {
+      if (x.status === 302) {
+        return new Response(null, {
+          status: instance ? 204 : 302,
+          headers: {
+            Location: x.headers.get("Location")
+          }
+        });
+      }
+      // forward headers
+      if (x.headers) {
+        for (const [key, value] of x.headers.entries()) {
+          setHeader(h3Event, key, value);
         }
-      });
+      }
+      if (x.customBody) {
+        x = await x.customBody();
+      } else if (x.body == undefined) x = undefined;
     }
     return x;
   }

package/config/server-runtime.jsx

@@ -9,14 +9,14 @@ import {
   RequestPlugin,
   ResponsePlugin,
   URLPlugin,
-  URLSearchParamsPlugin,
-} from 'seroval-plugins/web';
+  URLSearchParamsPlugin
+} from "seroval-plugins/web";
 import { createIslandReference } from "../server/islands";
 
-class ChunkReader {
+class SerovalChunkReader {
   constructor(stream) {
     this.reader = stream.getReader();
-    this.buffer = '';
+    this.buffer = "";
     this.done = false;
   }
 
@@ -31,50 +31,44 @@ class ChunkReader {
     }
   }
 
-  async nextValue() {
+  async next() {
     // Check if the buffer is empty
-    if (this.buffer === '') {
-      // if we are already one...
+    if (this.buffer === "") {
+      // if we are already done...
       if (this.done) {
         return {
           done: true,
-          value: undefined,
+          value: undefined
         };
       }
       // Otherwise, read a new chunk
       await this.readChunk();
+      return await this.next();
     }
-    // Get the first valid seroval chunk
-    const [first, ...rest] = this.buffer.split('\n');
-    // Deserialize the seroval chunk
-    const result = {
-      done: false,
-      value: deserialize(first),
-    };
-    // if it succeeds, remove the first valid chunk
-    // from the buffer
-    this.buffer = rest.join('\n');
-    return result;
-  }
-
-  async next() {
-    try {
-      // Attempt to read a valid seroval chunk
-      return await this.nextValue();
-    } catch (error) {
-      // If it happens that there's an error again
-      // and we are done reading the buffer
-      // then the whole stream is invalid.
+    // Read the "byte header"
+    // The byte header tells us how big the expected data is
+    // so we know how much data we should wait before we
+    // deserialize the data
+    const bytes = Number.parseInt(this.buffer.substring(1, 11), 16); // ;0x00000000;
+    // Check if the buffer has enough bytes to be parsed
+    while (bytes > this.buffer.length - 12) {
+      // If it's not enough, and the reader is done
+      // then the chunk is invalid.
       if (this.done) {
-        throw new Error('Malformed server function stream.');
+        throw new Error("Malformed server function stream.");
       }
-      // Since it's invalid (some syntax-related issue)
-      // we read a new chunk, and hope there's a valid
-      // seroval chunk there
+      // Otherwise, we read more chunks
       await this.readChunk();
-      // Retry again
-      return await this.next();
     }
+    // Extract the exact chunk as defined by the byte header
+    const partial = this.buffer.substring(12, 12 + bytes);
+    // The rest goes to the buffer
+    this.buffer = this.buffer.substring(12 + bytes);
+    // Deserialize the chunk
+    return {
+      done: false,
+      value: deserialize(partial)
+    };
   }
 
   async drain() {
@@ -91,7 +85,7 @@ async function deserializeStream(id, response) {
   if (!response.body) {
     throw new Error("missing body");
   }
-  const reader = new ChunkReader(response.body);
+  const reader = new SerovalChunkReader(response.body);
 
   const result = await reader.next();
 
@@ -123,31 +117,47 @@ function createRequest(base, id, instance, body, contentType) {
   });
 }
 
-async function fetchServerFunction(base, id, args) {
+async function fetchServerFunction(base, id, method, args) {
   const instance = `server-fn:${INSTANCE++}`;
-  const response = await (args.length === 1 && args[0] instanceof FormData
+  const response = await (method === "GET"
+    ? fetch(base + (args.length ? `&args=${JSON.stringify(args)}` : ""), {
+        headers: {
+          "x-server-instance": instance
+        }
+      })
+    : args.length === 1 && args[0] instanceof FormData
     ? createRequest(base, id, instance, args[0])
-    : createRequest(base, id, instance, JSON.stringify(await Promise.resolve(toJSONAsync(args, {
-      plugins: [
-        CustomEventPlugin,
-        DOMExceptionPlugin,
-        EventPlugin,
-        FormDataPlugin,
-        HeadersPlugin,
-        ReadableStreamPlugin,
-        RequestPlugin,
-        ResponsePlugin,
-        URLSearchParamsPlugin,
-        URLPlugin,
-      ],
-    }))), "application/json"));
+    : createRequest(
+        base,
+        id,
+        instance,
+        JSON.stringify(
+          await Promise.resolve(
+            toJSONAsync(args, {
+              plugins: [
+                CustomEventPlugin,
+                DOMExceptionPlugin,
+                EventPlugin,
+                FormDataPlugin,
+                HeadersPlugin,
+                ReadableStreamPlugin,
+                RequestPlugin,
+                ResponsePlugin,
+                URLSearchParamsPlugin,
+                URLPlugin
+              ]
+            })
+          )
+        ),
+        "application/json"
+      ));
 
   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 contentType = response.headers.get("Content-Type");
@@ -172,9 +182,12 @@ export function createServerReference(fn, id, name) {
       if (prop === "url") {
         return `${baseURL}/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
       }
+      if (prop === "GET") {
+        return (...args) => fetchServerFunction(`${baseURL}/_server/?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`, `${id}#${name}`, "GET", args);
+      }
     },
     apply(target, thisArg, args) {
-      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, args);
+      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, "POST", args);
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -43,13 +43,13 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.11",
-    "vinxi": "^0.1.2"
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.1.6"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "^0.1.0",
-    "@vinxi/server-components": "^0.1.0",
-    "@vinxi/server-functions": "^0.1.0",
+    "@vinxi/plugin-directives": "^0.1.3",
+    "@vinxi/server-components": "^0.1.3",
+    "@vinxi/server-functions": "^0.1.3",
     "defu": "^6.1.2",
     "error-stack-parser": "^2.1.4",
     "html-to-image": "^1.11.11",
@@ -59,7 +59,7 @@
     "source-map-js": "^1.0.2",
     "terracotta": "^1.0.4",
     "vite-plugin-inspect": "^0.7.33",
-    "vite-plugin-solid": "^2.8.0"
+    "vite-plugin-solid": "^2.9.1"
   },
   "scripts": {
     "typecheck": "tsc --noEmit --checkJs false --skipLibCheck"

package/server/middleware.ts

@@ -1,8 +1,6 @@
 import {
   defineMiddleware,
-  EventHandlerRequest,
   getRequestIP,
-  getRequestURL,
   H3Event,
   sendWebResponse,
   toWebRequest
@@ -18,15 +16,11 @@ const eventTraps = {
   }
 };
 
-export function createFetchEvent(event: H3Event<EventHandlerRequest>): FetchEvent {
-  event.web ||
-    (event.web = {
-      url: getRequestURL(event),
-      request: toWebRequest(event)
-    });
+export function createFetchEvent(event: H3Event): FetchEvent {
+  const request = toWebRequest(event);
   return new Proxy(
     {
-      request: event.web.request,
+      request: request,
       clientAddress: getRequestIP(event),
       locals: {},
       // @ts-ignore

package/server/page-event.tsx

@@ -45,7 +45,7 @@ export async function createPageEvent(ctx: FetchEvent) {
     components: {
       status: props => {
         setResponseStatus(ctx, props.code, props.text);
-        return () => setResponseStatus(ctx, 200);
+        return () => !ctx.handled && setResponseStatus(ctx, 200);
       },
       header: props => {
         if (props.append) {
@@ -55,18 +55,13 @@ export async function createPageEvent(ctx: FetchEvent) {
         }
 
         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);
-          }
+          if (ctx.handled) return;
+          let values = getResponseHeader(ctx, props.name);
+          if (!Array.isArray(values)) values = [values as string];
+          const index = values.indexOf(props.value);
+          index !== -1 && values.splice(index, 1);
+          if (values.length) setResponseHeader(ctx, props.name, values);
+          else removeResponseHeader(ctx, props.name);
         };
       }
     },

package/shared/GET.ts

@@ -0,0 +1,5 @@
+export function GET<T extends (...args: any[]) => any>(fn: T) {
+  return (...args: Parameters<T>) => {
+    return (fn as any).GET(...args) as ReturnType<T>;
+  };
+}

package/shared/dev-overlay/CodeView.tsx

@@ -1,8 +1,9 @@
 import type { BuiltinLanguage, Highlighter } from 'shikiji';
-import { getHighlighterCore } from 'shikiji/core';
-import { getWasmInlined } from 'shikiji/wasm';
+import { getHighlighterCore, loadWasm } from 'shikiji/core';
 import { createEffect, createResource, type JSX } from 'solid-js';
 
+import url from 'shikiji/onig.wasm?url';
+
 import langJS from 'shikiji/langs/javascript.mjs';
 import langJSX from 'shikiji/langs/jsx.mjs';
 import langTSX from 'shikiji/langs/tsx.mjs';
@@ -13,6 +14,7 @@ let HIGHLIGHTER: Highlighter;
 
 async function loadHighlighter() {
   if (!HIGHLIGHTER) {
+    await loadWasm(await fetch(url))
     HIGHLIGHTER = await getHighlighterCore({
       themes: [
         darkPlus,
@@ -23,7 +25,6 @@ async function loadHighlighter() {
         langTS,
         langTSX,
       ],
-      loadWasm: getWasmInlined,
     });
   }
   return HIGHLIGHTER;
@@ -77,7 +78,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       for (let i = 0, len = lines.length; i < len; i++) {
         const el = lines[i];
         if ((props.line - minLine() - 1) === i) {
-          el.innerHTML = `<mark style="background-color:#aaaaaa80">${el.innerHTML}</mark>`;
+          el.classList.add('dev-overlay-error-line');
         }
       }
     }

package/shared/dev-overlay/DevOverlayDialog.tsx

@@ -190,7 +190,7 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
     if (current) {
       htmlToImage.toPng(current, {
         style: {
-          transform: 'scale(1)',
+          transform: 'scale(0.75)',
         },
       }).then((url) => {
         download(url, 'start-screenshot.png');
@@ -216,59 +216,61 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
       <Dialog class="dev-overlay" isOpen>
         <div>
           <DialogOverlay class="dev-overlay-background"/>
-          <DialogPanel ref={setPanel} class="dev-overlay-panel">
-            <div class="dev-overlay-navbar">
-              <div class="dev-overlay-navbar-left">
-                <div class="dev-overlay-version">
-                  <div>
-                    <SolidStartIcon title="Solid Start Version" />
-                  </div>
-                  <span>{info.version as string}</span>
-                </div>
-                <Show when={props.errors.length > 1}>
-                  <div class="dev-overlay-pagination">
-                    <button class="dev-overlay-button" onClick={goPrev} type="button">
-                      <ArrowLeftIcon title="Go Previous" />
-                    </button>
-                    <div class="dev-overlay-page-counter">
-                      {`${truncated()} of ${props.errors.length}`}
+          <DialogPanel ref={setPanel} class="dev-overlay-panel-container">
+            <div class="dev-overlay-panel">
+              <div class="dev-overlay-navbar">
+                <div class="dev-overlay-navbar-left">
+                  <div class="dev-overlay-version">
+                    <div>
+                      <SolidStartIcon title="Solid Start Version" />
                     </div>
-                    <button class="dev-overlay-button" onClick={goNext} type="button">
-                      <ArrowRightIcon title="Go Next" />
-                    </button>
+                    <span>{info.version as string}</span>
                   </div>
-                </Show>
-              </div>
-              <div class="dev-overlay-controls">
-                <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
-                  <GithubIcon title="Create an issue thread on Github" />
-                </button>
-                <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
-                  <DiscordIcon title="Join our Discord Channel" />
-                </button>
-                <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
-                  <CameraIcon title="Capture Error Overlay" />
-                </button>
-                <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
-                  <Show when={isCompiled()} fallback={(
-                    <ViewOriginalIcon title="View Original Source" />
-                  )}>
-                    <ViewCompiledIcon title="View Compiled Source" />
+                  <Show when={props.errors.length > 1}>
+                    <div class="dev-overlay-pagination">
+                      <button class="dev-overlay-button" onClick={goPrev} type="button">
+                        <ArrowLeftIcon title="Go Previous" />
+                      </button>
+                      <div class="dev-overlay-page-counter">
+                        {`${truncated()} of ${props.errors.length}`}
+                      </div>
+                      <button class="dev-overlay-button" onClick={goNext} type="button">
+                        <ArrowRightIcon title="Go Next" />
+                      </button>
+                    </div>
                   </Show>
-                </button>
-                <button class="dev-overlay-button" onClick={props.resetError} type="button">
-                  <RefreshIcon title="Reset Error" />
-                </button>
+                </div>
+                <div class="dev-overlay-controls">
+                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
+                    <GithubIcon title="Create an issue thread on Github" />
+                  </button>
+                  <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
+                    <DiscordIcon title="Join our Discord Channel" />
+                  </button>
+                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
+                    <CameraIcon title="Capture Error Overlay" />
+                  </button>
+                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
+                    <Show when={isCompiled()} fallback={(
+                      <ViewOriginalIcon title="View Original Source" />
+                    )}>
+                      <ViewCompiledIcon title="View Compiled Source" />
+                    </Show>
+                  </button>
+                  <button class="dev-overlay-button" onClick={props.resetError} type="button">
+                    <RefreshIcon title="Reset Error" />
+                  </button>
+                </div>
               </div>
+              <Show when={props.errors[truncated() - 1]} keyed>
+                {(current) => (
+                  <div class="dev-overlay-content">
+                    <ErrorInfo error={current} />
+                    <StackFrames error={current} isCompiled={isCompiled()} />
+                  </div>
+                )}
+              </Show>
             </div>
-            <Show when={props.errors[truncated() - 1]} keyed>
-              {(current) => (
-                <div class="dev-overlay-content">
-                  <ErrorInfo error={current} />
-                  <StackFrames error={current} isCompiled={isCompiled()} />
-                </div>
-              )}
-            </Show>
           </DialogPanel>
         </div>
       </Dialog>

package/shared/dev-overlay/createStackFrame.ts

@@ -9,6 +9,13 @@ export interface StackFrameSource {
   column: number;
 }
 
+function getActualFileSource(path: string): string {
+  if (path.startsWith('file://')) {
+    return '/_build/@fs' + path.substring('file://'.length);
+  }
+  return path;
+}
+
 export function createStackFrame(
   stackframe: StackFrame,
   isCompiled: () => boolean,
@@ -24,7 +31,7 @@ export function createStackFrame(
       if (!source.fileName) {
         return null;
       }
-      const response = await fetch(source.fileName);
+      const response = await fetch(getActualFileSource(source.fileName));
       if (!response.ok) {
         return null;
       }
@@ -51,6 +58,7 @@ export function createStackFrame(
         line: source.line,
         column: source.column,
       });
+      console.log('sourcemap', result);
 
       return {
         ...result,

package/shared/dev-overlay/styles.css

@@ -25,12 +25,16 @@
   width: 75vw;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  z-index: 10;
   gap: 0.5rem;
   color: rgb(17 24 39);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.dev-overlay-panel-container {
+  margin: 2rem;
+  z-index: 10;
+}
+
 .dev-overlay-navbar {
   display: flex;
   flex-direction: row;
@@ -281,4 +285,8 @@
   display: inline-block;
   text-align: right;
   color: rgba(115, 138, 148, .4)
+}
+
+.dev-overlay-error-line {
+  background-color: rgba(239, 68, 68, .4);
 }

package/shared/index.tsx

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

package/shared/lazyRoute.tsx

@@ -1,60 +1,54 @@
 /// <reference types="vinxi/types/client" />
 import { createComponent, lazy, onCleanup } from "solid-js";
-import { appendStyles, cleanupStyles, updateStyles } from "vinxi/css";
+import { appendStyles, cleanupStyles, updateStyles, preloadStyles } from "vinxi/css";
 
 import { renderAsset } from "../server/renderAsset";
 
-export default function lazyRoute(
-	component,
-	clientManifest,
-	serverManifest,
-	exported = "default",
-) {
-	return lazy(async () => {
-		if (import.meta.env.DEV) {
-			let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
+export default function lazyRoute(component, clientManifest, serverManifest, exported = "default") {
+  return lazy(async () => {
+    if (import.meta.env.DEV) {
+      let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
 
-			const mod = await manifest.inputs[component.src].import();
-			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 mod = await manifest.inputs[component.src].import();
+      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");
 
-			if (typeof window !== "undefined" && import.meta.hot) {
-				import.meta.hot.on("css-update", (data) => {
-					updateStyles(styles, data);
-				});
-			}
+      if (typeof window !== "undefined" && import.meta.hot) {
+        import.meta.hot.on("css-update", data => {
+          updateStyles(styles, data);
+        });
+      }
 
-			const Comp = (props) => {
-				if (typeof window !== "undefined") {
-					appendStyles(styles);
-				}
+      const Comp = props => {
+        if (typeof window !== "undefined") {
+          appendStyles(styles);
+        }
 
-				onCleanup(() => {
-					if (typeof window !== "undefined") {
-						// remove style tags added by vite when a CSS file is imported
-						cleanupStyles(styles);
-					}
-				});
-				return [
-					...assets.map((asset) => renderAsset(asset)),
-					createComponent(Component, props),
-				];
-			};
-			return { default: Comp };
-		} else {
-			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 [
-					...styles.map((asset) => renderAsset(asset)),
-					createComponent(Component, props),
-				];
-			};
-			return { default: Comp };
-		}
-	});
+        onCleanup(() => {
+          if (typeof window !== "undefined") {
+            // remove style tags added by vite when a CSS file is imported
+            cleanupStyles(styles);
+          }
+        });
+        return [...assets.map(asset => renderAsset(asset)), createComponent(Component, props)];
+      };
+      return { default: Comp };
+    } else {
+      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"
+      );
+      if (typeof window !== "undefined") {
+        preloadStyles(styles);
+      }
+      const Comp = props => {
+        return [...styles.map(asset => renderAsset(asset)), createComponent(Component, props)];
+      };
+      return { default: Comp };
+    }
+  });
 }