@solidjs/start 2.0.0-beta.9 → 2.0.0-rc.10

package/dist/fns/serialization.js

@@ -1,6 +1,6 @@
 import { crossSerializeStream, deserialize, Feature, fromCrossJSON, getCrossReferenceHeader, toCrossJSONStream, } from "seroval";
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLPlugin, URLSearchParamsPlugin, } from "seroval-plugins/web";
-// TODO(Alexis): if we can, allow providing an option to extend these.
+import userPlugins from "solid-start:seroval-plugins";
 const DEFAULT_PLUGINS = [
     AbortSignalPlugin,
     CustomEventPlugin,
@@ -14,8 +14,37 @@ const DEFAULT_PLUGINS = [
     URLSearchParamsPlugin,
     URLPlugin,
 ];
+/**
+ * Plugins from `serialization.plugins` are appended rather than prepended:
+ * seroval picks the first plugin whose `test()` passes, so the built-ins win
+ * and a loose user `test()` can't take over `Request`/`FormData`/`URL`.
+ *
+ * The same list has to be used on both ends of a server function, which is why
+ * this comes from a virtual module bundled into the client and the server
+ * rather than a runtime option.
+ */
+const PLUGINS = [...DEFAULT_PLUGINS, ...userPlugins];
 const MAX_SERIALIZATION_DEPTH_LIMIT = 64;
 const DISABLED_FEATURES = Feature.RegExp;
+/**
+ * An error thrown by a server function is serialized and rethrown on the
+ * client, and seroval includes `Error.prototype.stack` by default. In
+ * production that leaks server file paths, internal function names and the
+ * shape of the deployment to anyone who can trigger a throw, so strip it.
+ * Development keeps the stack: that's where it's actually useful, and the
+ * paths it exposes are the developer's own.
+ *
+ * Only applied when writing; parsing leaves `DISABLED_FEATURES` alone so an
+ * incoming payload that does carry a stack still deserializes.
+ */
+const SERIALIZE_DISABLED_FEATURES = import.meta.env.PROD
+    ? DISABLED_FEATURES | Feature.ErrorPrototypeStack
+    : DISABLED_FEATURES;
+/**
+ * `crossSerializeStream` historically ran with every feature enabled, so only
+ * add the stack removal here rather than the full serialize set.
+ */
+const JS_SERIALIZE_DISABLED_FEATURES = import.meta.env.PROD ? Feature.ErrorPrototypeStack : 0;
 /**
  * Alexis:
  *
@@ -47,7 +76,8 @@ export function serializeToJSStream(id, value) {
         start(controller) {
             crossSerializeStream(value, {
                 scopeId: id,
-                plugins: DEFAULT_PLUGINS,
+                disabledFeatures: JS_SERIALIZE_DISABLED_FEATURES,
+                plugins: PLUGINS,
                 onSerialize(data, initial) {
                     controller.enqueue(createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data));
                 },
@@ -65,9 +95,9 @@ export function serializeToJSONStream(value) {
     return new ReadableStream({
         start(controller) {
             toCrossJSONStream(value, {
-                disabledFeatures: DISABLED_FEATURES,
+                disabledFeatures: SERIALIZE_DISABLED_FEATURES,
                 depthLimit: MAX_SERIALIZATION_DEPTH_LIMIT,
-                plugins: DEFAULT_PLUGINS,
+                plugins: PLUGINS,
                 onParse(node) {
                     controller.enqueue(createChunk(JSON.stringify(node)));
                 },
@@ -81,7 +111,7 @@ export function serializeToJSONStream(value) {
         },
     });
 }
-class SerovalChunkReader {
+export class SerovalChunkReader {
     reader;
     buffer;
     done;
@@ -180,7 +210,7 @@ export async function deserializeJSONStream(response) {
                 refs,
                 disabledFeatures: DISABLED_FEATURES,
                 depthLimit: MAX_SERIALIZATION_DEPTH_LIMIT,
-                plugins: DEFAULT_PLUGINS,
+                plugins: PLUGINS,
             });
             return value;
         }

package/dist/middleware/index.js

@@ -54,7 +54,10 @@ export function createMiddleware(args) {
         mw.push(wrapResponseMiddleware(args.onBeforeResponse));
     }
     else if (Array.isArray(args.onBeforeResponse)) {
-        mw.push(...args.onBeforeResponse.map(wrapResponseMiddleware));
+        // h3 middleware compose onion-style: logic after `await next()` unwinds
+        // innermost-first (reverse registration order). Register the wrappers
+        // reversed so onBeforeResponse functions run in their declared order.
+        mw.push(...args.onBeforeResponse.map(wrapResponseMiddleware).reverse());
     }
     return mw;
 }

package/dist/server/StartServer.jsx

@@ -19,7 +19,7 @@ export function StartServer(props) {
       <TopErrorBoundary>
         <props.document assets={<HydrationScript />} scripts={<>
               <PatchVirtualDevStyles nonce={nonce}/>
-              <script type="module" nonce={nonce} async src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}/>
+              <script type="module" nonce={nonce} async src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY_URL)}/>
             </>}>
           {!import.meta.env.START_ISLANDS ? (<Hydration>
               <ErrorBoundary>

package/dist/server/assets/render.jsx

@@ -9,6 +9,6 @@ const assetMap = {
     noscript: (props) => (<noscript {...props.attrs}>{props.children}</noscript>),
 };
 export function renderAsset(asset, nonce) {
-    let { tag, attrs: { key, ...attrs } = { key: undefined }, children, } = asset;
+    let { tag, attrs: { key, ...attrs } = { key: undefined }, children } = asset;
     return assetMap[tag]({ attrs: { ...attrs, nonce }, key, children });
 }

package/dist/server/collect-styles.d.ts

@@ -1,3 +1,5 @@
 import type { DevEnvironment } from "vite";
+type StyleFilter = (id: string) => boolean;
 export declare const isCssModulesFile: (file: string) => boolean;
-export declare function findStylesInModuleGraph(vite: DevEnvironment, id: string): Promise<Record<string, any>>;
+export declare function findStylesInModuleGraph(vite: DevEnvironment, id: string, filter: StyleFilter): Promise<Record<string, any>>;
+export {};

package/dist/server/collect-styles.js

@@ -8,13 +8,16 @@ async function getViteModuleNode(vite, file, importer) {
     }
     catch (err) { }
 }
-async function findModuleDependencies(vite, file, deps, crawledFiles = new Set(), importer) {
+async function findModuleDependencies(vite, file, deps, filter, crawledFiles = new Set(), importer) {
     crawledFiles.add(file);
     const module = await getViteModuleNode(vite, file, importer);
     if (!module?.id || deps.has(module))
         return;
     deps.add(module);
-    if (module.url.endsWith(".css") || module.url.includes("node_modules"))
+    if (module.url.endsWith(".css"))
+        return;
+    // Apply user-config file filters only to real files (virtual modules should always be included)
+    if (module.file && !module.id.startsWith("\0") && !filter(module.file))
         return;
     if (!module.transformResult) {
         await vite.transformRequest(module.id).catch(() => { });
@@ -28,7 +31,7 @@ async function findModuleDependencies(vite, file, deps, crawledFiles = new Set()
         if (crawledFiles.has(dep)) {
             continue;
         }
-        await findModuleDependencies(vite, dep, deps, crawledFiles, module.id);
+        await findModuleDependencies(vite, dep, deps, filter, crawledFiles, module.id);
     }
 }
 // Vite doesn't expose these so we just copy the list for now
@@ -38,11 +41,11 @@ const cssFileRegExp = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)$/;
 const cssModulesRegExp = new RegExp(`\\.module${cssFileRegExp.source}`);
 const isCssFile = (file) => cssFileRegExp.test(file);
 export const isCssModulesFile = (file) => cssModulesRegExp.test(file);
-export async function findStylesInModuleGraph(vite, id) {
+export async function findStylesInModuleGraph(vite, id, filter) {
     const absolute = path.resolve(process.cwd(), id);
     const dependencies = new Set();
     try {
-        await findModuleDependencies(vite, absolute, dependencies);
+        await findModuleDependencies(vite, absolute, dependencies, filter);
     }
     catch (e) {
         console.error(e);

package/dist/server/fetchEvent.d.ts

@@ -3,5 +3,15 @@ import type { FetchEvent } from "./types.ts";
 export declare function createFetchEvent(event: H3Event): FetchEvent;
 export declare function getFetchEvent(h3Event: H3Event): FetchEvent;
 export declare function mergeResponseHeaders(h3Event: H3Event, headers: Headers): void;
+/**
+ * Wrap an h3 event handler so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export declare const decorateHandler: <T extends EventHandler>(fn: T) => T;
+/**
+ * Wrap h3 middleware so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export declare const decorateMiddleware: <T extends Middleware>(fn: T) => T;

package/dist/server/fetchEvent.js

@@ -22,5 +22,15 @@ export function mergeResponseHeaders(h3Event, headers) {
         h3Event.res.headers.append(key, value);
     }
 }
+/**
+ * Wrap an h3 event handler so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export const decorateHandler = (fn) => (event => provideRequestEvent(getFetchEvent(event), () => fn(event)));
+/**
+ * Wrap h3 middleware so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export const decorateMiddleware = (fn) => ((event, next) => provideRequestEvent(getFetchEvent(event), () => fn(event, next)));

package/dist/server/handler.d.ts

@@ -1,6 +1,5 @@
-import { H3 } from "h3/generic";
 import type { JSX } from "solid-js";
-import type { FetchEvent, HandlerOptions, PageEvent } from "./types.ts";
-export declare function createBaseHandler(createPageEvent: (e: FetchEvent) => Promise<PageEvent>, fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): H3;
-export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): H3;
+import type { FetchEvent, HandlerOptions, PageEvent, StartHandler } from "./types.ts";
+export declare function createBaseHandler(createPageEvent: (e: FetchEvent) => Promise<PageEvent>, fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>), routerLoad?: (event: FetchEvent) => Promise<void>): StartHandler;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>), routerLoad?: (event: FetchEvent) => Promise<void>): StartHandler;
 export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/handler.js

@@ -1,5 +1,5 @@
 import middleware from "solid-start:middleware";
-import { defineHandler, getCookie, H3, redirect, setCookie } from "h3/generic";
+import { defineHandler, getCookie, H3, iterable, redirect, setCookie, } from "h3/generic";
 import { sharedConfig } from "solid-js";
 import { getRequestEvent, renderToStream, renderToString } from "solid-js/web";
 import { createRoutes } from "../router.jsx";
@@ -8,8 +8,10 @@ import { getSsrManifest } from "./manifest/ssr-manifest.js";
 import { matchAPIRoute } from "./routes.js";
 import { handleServerFunction } from "../fns/handler.js";
 import { getExpectedRedirectStatus } from "./util.js";
+import { toWebReadableStream } from "./web-stream.js";
+import { stripPathBase } from "./strip-path-base.js";
 const SERVER_FN_BASE = "/_server";
-export function createBaseHandler(createPageEvent, fn, options = {}) {
+export function createBaseHandler(createPageEvent, fn, options = {}, routerLoad) {
     const handler = defineHandler({
         middleware: middleware.length ? middleware.map(decorateMiddleware) : undefined,
         handler: decorateHandler(async (e) => {
@@ -17,12 +19,7 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
             const url = new URL(event.request.url);
             const pathname = stripBaseUrl(url.pathname);
             if (pathname.startsWith(SERVER_FN_BASE)) {
-                const serverFnResponse = await handleServerFunction(e);
-                if (serverFnResponse instanceof Response)
-                    return produceResponseWithEventHeaders(serverFnResponse);
-                return new Response(serverFnResponse, {
-                    headers: e.res.headers,
-                });
+                return await handleServerFunction(e);
             }
             const match = matchAPIRoute(pathname, event.request.method);
             if (match) {
@@ -34,8 +31,6 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
                     sharedConfig.context = { event };
                     const res = await fn(event);
                     if (res !== undefined) {
-                        if (res instanceof Response)
-                            return produceResponseWithEventHeaders(res);
                         return res;
                     }
                     if (event.request.method !== "GET") {
@@ -45,6 +40,8 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
                         return;
                 }
             }
+            if (routerLoad)
+                await routerLoad(event);
             const context = await createPageEvent(event);
             const resolvedOptions = typeof options === "function" ? await options(context) : { ...options };
             const mode = resolvedOptions.mode || "stream";
@@ -92,23 +89,17 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
             }
             if (mode === "async")
                 return await stream;
-            delete stream.then;
-            // using TransformStream in dev can cause solid-start-dev-server to crash
-            // when stream is cancelled
-            if (globalThis.USING_SOLID_START_DEV_SERVER)
-                return stream;
-            // returning stream directly breaks cloudflare workers
-            const { writable, readable } = new TransformStream();
-            stream.pipeTo(writable);
-            return readable;
+            // h3 expects a standard web ReadableStream across runtimes. The adapter
+            // also tolerates cancellation while Solid finishes outstanding work.
+            return iterable(toWebReadableStream(stream));
         }),
     });
     const app = new H3();
     app.use(handler);
     return app;
 }
-export function createHandler(fn, options = {}) {
-    return createBaseHandler(createPageEvent, fn, options);
+export function createHandler(fn, options = {}, routerLoad) {
+    return createBaseHandler(createPageEvent, fn, options, routerLoad);
 }
 export async function createPageEvent(ctx) {
     ctx.response.headers.set("Content-Type", "text/html");
@@ -180,43 +171,18 @@ function handleStreamCompleteRedirect(context) {
     return ({ write }) => {
         context.complete = true;
         const to = context.response && context.response.headers.get("Location");
-        to && write(`<script>window.location=${JSON.stringify(to).replace(/</g, "\\u003c")}</script>`);
+        if (!to)
+            return;
+        // The shell has already flushed, so the redirect has to happen client side.
+        // Carry the nonce so a strict `script-src` CSP doesn't block it.
+        const nonce = context.nonce ? ` nonce="${escapeAttribute(context.nonce)}"` : "";
+        write(`<script${nonce}>window.location=${JSON.stringify(to).replace(/</g, "\\u003c")}</script>`);
     };
 }
-function produceResponseWithEventHeaders(res) {
-    const event = getRequestEvent();
-    let ret = res;
-    // Response.redirect returns an immutable value, so we clone on any redirect just in case
-    if (300 <= res.status && res.status < 400) {
-        const cookies = res.headers.getSetCookie?.() ?? [];
-        const headers = new Headers();
-        res.headers.forEach((value, key) => {
-            if (key.toLowerCase() !== "set-cookie") {
-                headers.set(key, value);
-            }
-        });
-        for (const cookie of cookies) {
-            headers.append("Set-Cookie", cookie);
-        }
-        ret = new Response(res.body, {
-            status: res.status,
-            statusText: res.statusText,
-            headers,
-        });
-    }
-    const eventCookies = event.response.headers.getSetCookie?.() ?? [];
-    for (const cookie of eventCookies) {
-        ret.headers.append("Set-Cookie", cookie);
-    }
-    for (const [name, value] of event.response.headers) {
-        if (name.toLowerCase() !== "set-cookie") {
-            ret.headers.set(name, value);
-        }
-    }
-    return ret;
+function escapeAttribute(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
 function stripBaseUrl(path) {
-    if (import.meta.env.BASE_URL === "/" || import.meta.env.BASE_URL === "")
-        return path;
-    return path.slice(import.meta.env.BASE_URL.length);
+    const base = import.meta.env.SERVER_BASE_URL || import.meta.env.BASE_URL || "/";
+    return stripPathBase(path, base);
 }

package/dist/server/index.d.ts

@@ -1,8 +1,10 @@
 export { default as lazy } from "../shared/lazy.ts";
 export { getServerFunctionMeta } from "../shared/serverFunction.ts";
 export { StartServer } from "./StartServer.tsx";
+export { decorateHandler, decorateMiddleware } from "./fetchEvent.ts";
 export { createHandler } from "./handler.ts";
-export type { APIEvent, APIHandler, Asset, ContextMatches, DocumentComponentProps, FetchEvent, HandlerOptions, PageEvent, ResponseStub, ServerFunctionMeta, } from "./types.ts";
+export type { ServerFunctionErrorHandler } from "../fns/error-handler.ts";
+export type { APIEvent, APIHandler, Asset, ContextMatches, DocumentComponentProps, FetchEvent, HandlerOptions, PageEvent, ResponseStub, ServerFunctionMeta, StartHandler, } from "./types.ts";
 /**
  * Checks if user has set a redirect status in the response.
  * If not, falls back to the 302 (temporary redirect)

package/dist/server/index.jsx

@@ -1,6 +1,7 @@
 export { default as lazy } from "../shared/lazy.js";
 export { getServerFunctionMeta } from "../shared/serverFunction.js";
 export { StartServer } from "./StartServer.jsx";
+export { decorateHandler, decorateMiddleware } from "./fetchEvent.js";
 export { createHandler } from "./handler.js";
 /**
  * Checks if user has set a redirect status in the response.

package/dist/server/manifest/dev-client-manifest.js

@@ -13,7 +13,7 @@ export function getClientDevManifest() {
             return import(__rewriteRelativeImportExtension(/* @vite-ignore */ join("/", id), true));
         },
         async getAssets(id) {
-            const assetsPath = `/@manifest/client/${Date.now()}/assets?id=${id}`;
+            const assetsPath = `/@manifest/client/${Date.now()}/assets?id=${encodeURIComponent(id)}`;
             const assets = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ assetsPath, true))).default;
             return await Promise.all(assets.map(async (v) => ({
                 ...v,

package/dist/server/manifest/dev-ssr-manifest.js

@@ -11,7 +11,7 @@ export function getSsrDevManifest(environment) {
     return {
         path: (id) => normalize(join(import.meta.env.BASE_URL, id)),
         async getAssets(id) {
-            const assetsPath = `/@manifest/${environment}/${Date.now()}/assets?id=${id}`;
+            const assetsPath = `/@manifest/${environment}/${Date.now()}/assets?id=${encodeURIComponent(id)}`;
             const assets = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ assetsPath, true))).default;
             return await Promise.all(assets.map(async (v) => ({
                 ...v,

package/dist/server/spa/StartServer.jsx

@@ -18,7 +18,7 @@ export function StartServer(props) {
       <TopErrorBoundary>
         <props.document scripts={<>
               <PatchVirtualDevStyles nonce={nonce}/>
-              <script type="module" src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}/>
+              <script type="module" nonce={nonce} src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY_URL)}/>
             </>}/>
       </TopErrorBoundary>
     </NoHydration>);

package/dist/server/spa/handler.d.ts

@@ -1,8 +1,7 @@
-import type { H3 } from "h3/generic";
 import type { JSX } from "solid-js";
-import type { HandlerOptions, PageEvent } from "../types.ts";
+import type { FetchEvent, HandlerOptions, PageEvent, StartHandler } from "../types.ts";
 /**
  *
  * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
  */
-export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)): H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions), routerLoad?: (event: FetchEvent) => Promise<void>): StartHandler;

package/dist/server/spa/handler.js

@@ -4,8 +4,8 @@ import { getSsrManifest } from "../manifest/ssr-manifest.js";
  *
  * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
  */
-export function createHandler(fn, options) {
-    return createBaseHandler(createPageEvent, fn, options);
+export function createHandler(fn, options, routerLoad) {
+    return createBaseHandler(createPageEvent, fn, options, routerLoad);
 }
 async function createPageEvent(ctx) {
     const manifest = getSsrManifest("ssr");

package/dist/server/strip-path-base.d.ts

@@ -0,0 +1 @@
+export declare function stripPathBase(path: string, base: string): string;

package/dist/server/strip-path-base.js

@@ -0,0 +1,10 @@
+export function stripPathBase(path, base) {
+    if (!base || base === "/")
+        return path;
+    const normalizedBase = base.endsWith("/") ? base.slice(0, -1) : base;
+    if (path === normalizedBase)
+        return "/";
+    if (path.startsWith(`${normalizedBase}/`))
+        return path.slice(normalizedBase.length);
+    return path;
+}

package/dist/server/types.d.ts

@@ -1,6 +1,17 @@
-import type { H3Event } from "h3";
+import type { H3, H3Event } from "h3";
 import type { JSX } from "solid-js";
 import type { RequestEvent } from "solid-js/web";
+/**
+ * The h3 app instance returned by `createHandler`.
+ *
+ * Structurally identical to h3's `H3`, but declared here so that `export default
+ * createHandler(...)` in `entry-server.tsx` can be named through `@solidjs/start`.
+ * Referring to `H3` directly makes TypeScript emit a reference to h3's internal
+ * `H3$1` class, which is not portable when h3 is nested inside
+ * `node_modules/@solidjs/start/node_modules` (TS2742 / TS2883).
+ */
+export interface StartHandler extends H3 {
+}
 export type DocumentComponentProps = {
     assets?: JSX.Element;
     scripts: JSX.Element;

package/dist/server/web-stream.d.ts

@@ -0,0 +1,9 @@
+type PipeableStream = {
+    pipe(writable: {
+        write(payload: string): void;
+        end(): void;
+    }): void;
+};
+/** Convert Solid's streaming SSR result into a cancellation-safe web stream. */
+export declare function toWebReadableStream(stream: PipeableStream): ReadableStream<Uint8Array<ArrayBufferLike>>;
+export {};

package/dist/server/web-stream.js

@@ -0,0 +1,29 @@
+/** Convert Solid's streaming SSR result into a cancellation-safe web stream. */
+export function toWebReadableStream(stream) {
+    const encoder = new TextEncoder();
+    let active = true;
+    return new ReadableStream({
+        start(controller) {
+            stream.pipe({
+                write(payload) {
+                    if (!active)
+                        return;
+                    // Encoding string to Uint8Array makes sure that
+                    // the stream can be consumed as Response body
+                    controller.enqueue(encoder.encode(payload));
+                },
+                end() {
+                    if (!active)
+                        return;
+                    active = false;
+                    controller.close();
+                },
+            });
+        },
+        cancel() {
+            // Solid may still resolve Suspense resources after the response is
+            // cancelled. Ignore those writes and let Solid finish its cleanup.
+            active = false;
+        },
+    });
+}

package/dist/shared/ErrorBoundary.jsx

@@ -1,10 +1,10 @@
 // @refresh skip
-import { ErrorBoundary as DefaultErrorBoundary, catchError } from "solid-js";
+import { catchError, ErrorBoundary as DefaultErrorBoundary } from "solid-js";
 import { isServer } from "solid-js/web";
+import { DevToolbar } from "./dev-toolbar/index.jsx";
 import { HttpStatusCode } from "./HttpStatusCode.js";
-import { DevOverlay } from "./dev-overlay/index.jsx";
 export const ErrorBoundary = import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
-    ? (props) => <DevOverlay>{props.children}</DevOverlay>
+    ? (props) => <DevToolbar>{props.children}</DevToolbar>
     : (props) => {
         const message = isServer
             ? "500 | Internal Server Error"

package/dist/shared/clientOnly.js

@@ -19,7 +19,9 @@ export default function clientOnly(fn, options = {}) {
             return Comp(rest);
         const [mounted, setMounted] = createSignal(!sharedConfig.context);
         onMount(() => setMounted(true));
-        return createMemo(() => ((Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))));
+        return createMemo(() => ((Comp = comp()),
+            (m = mounted()),
+            untrack(() => (Comp && m ? Comp(rest) : props.fallback))));
     };
 }
 function load(fn, setComp) {

package/dist/shared/{dev-overlay → dev-toolbar/error-viewer}/CodeView.jsx

@@ -51,12 +51,12 @@ export function CodeView(props) {
             for (let i = 0, len = lines.length; i < len; i++) {
                 const el = lines[i];
                 if (props.line - minLine() - 1 === i) {
-                    el.dataset.startDevOverlayErrorLine = '';
+                    el.dataset.startErrorViewerErrorLine = "";
                 }
             }
         }
     });
-    return (<div ref={ref} data-start-dev-overlay-code-view style={{
-            "--dev-overlay-code-view-start": minLine() + 1,
+    return (<div ref={ref} data-start-error-viewer-code-view style={{
+            "--error-viewer-code-view-start": minLine() + 1,
         }}/>);
 }

package/dist/shared/dev-toolbar/error-viewer/create-stack-frame.js

@@ -0,0 +1,90 @@
+import { createMemo, createResource } from "solid-js";
+import getSourceMap from "./get-source-map.js";
+const HTTP_URL_REGEX = /^https?:\/\//;
+const LEADING_SLASH_REGEX = /^\/+/;
+// Frames from an SSR error carry filesystem paths (or file:// URLs) rather
+// than the http URL the module is served from. Their positions are already
+// mapped back to the original source by the Vite module runner, unlike
+// client frames whose positions refer to the compiled module.
+function isServerSource(path) {
+    return !HTTP_URL_REGEX.test(path);
+}
+function getActualFileSource(path) {
+    if (path.startsWith("file://")) {
+        return "/@fs/" + path.substring("file://".length).replace(LEADING_SLASH_REGEX, "");
+    }
+    if (isServerSource(path)) {
+        return "/@fs/" + path.replace(LEADING_SLASH_REGEX, "");
+    }
+    return path;
+}
+export function createStackFrame(stackframe, isCompiled) {
+    const [data] = createResource(() => ({
+        fileName: stackframe.fileName,
+        line: stackframe.lineNumber,
+        column: stackframe.columnNumber,
+        functionName: stackframe.functionName,
+    }), async (source) => {
+        if (!source.fileName) {
+            return null;
+        }
+        const url = getActualFileSource(source.fileName);
+        const response = await fetch(url);
+        if (!response.ok) {
+            return null;
+        }
+        const content = await response.text();
+        const sourceMap = await getSourceMap(url, content);
+        return {
+            source,
+            content,
+            sourceMap,
+            isServer: isServerSource(source.fileName),
+        };
+    });
+    const info = createMemo(() => {
+        const current = data();
+        if (!current) {
+            return undefined;
+        }
+        const { source, content, sourceMap, isServer } = current;
+        if (!isCompiled() && source.line && source.column && sourceMap) {
+            if (isServer) {
+                // The position is already original; only the original content needs
+                // to be pulled out of the source map.
+                const originalContent = sourceMap.sources.length
+                    ? sourceMap.sourceContentFor(sourceMap.sources[0], true)
+                    : null;
+                if (originalContent) {
+                    return {
+                        source: source.fileName,
+                        line: source.line,
+                        column: source.column,
+                        name: source.functionName,
+                        content: originalContent,
+                    };
+                }
+            }
+            else {
+                const result = sourceMap.originalPositionFor({
+                    line: source.line,
+                    column: source.column,
+                });
+                if (result.source) {
+                    return {
+                        ...result,
+                        content: sourceMap.sourceContentFor(result.source, true),
+                    };
+                }
+            }
+        }
+        return {
+            source: source.fileName,
+            line: source.line,
+            column: source.column,
+            name: source.functionName,
+            content,
+        };
+    });
+    return info;
+}

package/dist/shared/{dev-overlay/DevOverlayDialog.d.ts → dev-toolbar/error-viewer/index.d.ts}

@@ -1,9 +1,10 @@
 import type { JSX } from "solid-js";
 import "./styles.css";
 export declare function classNames(...classes: (string | boolean | undefined)[]): string;
-interface DevOverlayDialogProps {
+interface ErrorViewerProps {
+    show?: boolean;
     errors: any[];
     resetError: () => void;
 }
-export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Element;
+export default function ErrorViewer(props: ErrorViewerProps): JSX.Element;
 export {};