@solidjs/start 2.0.0-alpha.2 → 2.0.0-beta.0

package/dist/fns/shared.js

@@ -0,0 +1,105 @@
+import { deserializeJSONStream, deserializeJSStream } from "./serialization.js";
+export const BODY_FORMAT_KEY = "X-Start-Type";
+export const BODY_FORMAL_FILE = "__START__";
+export var BodyFormat;
+(function (BodyFormat) {
+    BodyFormat["Seroval"] = "0";
+    BodyFormat["String"] = "1";
+    BodyFormat["FormData"] = "2";
+    BodyFormat["URLSearchParams"] = "3";
+    BodyFormat["Blob"] = "4";
+    BodyFormat["File"] = "5";
+    BodyFormat["ArrayBuffer"] = "6";
+    BodyFormat["Uint8Array"] = "7";
+})(BodyFormat || (BodyFormat = {}));
+export function getHeadersAndBody(body) {
+    switch (true) {
+        case typeof body === "string":
+            return {
+                headers: {
+                    "Content-Type": "text/plain",
+                    [BODY_FORMAT_KEY]: BodyFormat.String,
+                },
+                body,
+            };
+        case body instanceof FormData:
+            return {
+                headers: {
+                    [BODY_FORMAT_KEY]: BodyFormat.FormData,
+                },
+                body,
+            };
+        case body instanceof URLSearchParams:
+            return {
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                    [BODY_FORMAT_KEY]: BodyFormat.URLSearchParams,
+                },
+                body,
+            };
+        case body instanceof File: {
+            const formData = new FormData();
+            formData.append(BODY_FORMAL_FILE, body, body.name);
+            return {
+                headers: {
+                    [BODY_FORMAT_KEY]: BodyFormat.File,
+                },
+                body: formData,
+            };
+        }
+        case body instanceof Blob:
+            return {
+                headers: {
+                    [BODY_FORMAT_KEY]: BodyFormat.Blob,
+                },
+                body,
+            };
+        case body instanceof ArrayBuffer:
+            return {
+                headers: {
+                    [BODY_FORMAT_KEY]: BodyFormat.ArrayBuffer,
+                },
+                body,
+            };
+        case body instanceof Uint8Array:
+            return {
+                headers: {
+                    [BODY_FORMAT_KEY]: BodyFormat.Uint8Array,
+                },
+                body: new Uint8Array(body),
+            };
+        default:
+            return undefined;
+    }
+}
+export async function extractBody(instance, client, source) {
+    const contentType = source.headers.get("content-type");
+    const startType = source.headers.get(BODY_FORMAT_KEY);
+    const clone = source.clone();
+    switch (true) {
+        case startType === BodyFormat.Seroval:
+            if (client && import.meta.env.SEROVAL_MODE === "js") {
+                return await deserializeJSStream(instance, clone);
+            }
+            return await deserializeJSONStream(clone);
+        case startType === BodyFormat.String:
+            return await clone.text();
+        case startType === BodyFormat.File: {
+            const formData = await clone.formData();
+            return formData.get(BODY_FORMAL_FILE);
+        }
+        case startType === BodyFormat.FormData:
+        case contentType?.startsWith("multipart/form-data"):
+            return await clone.formData();
+        case startType === BodyFormat.URLSearchParams:
+        case contentType?.startsWith("application/x-www-form-urlencoded"):
+            return new URLSearchParams(await clone.text());
+        case startType === BodyFormat.Blob:
+            return await clone.blob();
+        case startType === BodyFormat.ArrayBuffer:
+            return await clone.arrayBuffer();
+        case startType === BodyFormat.Uint8Array:
+            return new Uint8Array(await clone.arrayBuffer());
+    }
+    return undefined;
+}

package/dist/http/index.d.ts

@@ -70,7 +70,7 @@ export declare const setHeaders: (values: Record<string, string>) => void;
 export declare const getHeader: WrapFunction<typeof h3.getRequestHeader>;
 export declare const getHeaders: WrapFunction<typeof h3.getRequestHeaders>;
 export declare const getRequestFingerprint: WrapFunction<typeof h3.getRequestFingerprint>;
-export declare const getRequestWebStream: () => ReadableStream<Uint8Array<ArrayBufferLike>> | null;
+export declare const getRequestWebStream: () => ReadableStream<Uint8Array<ArrayBuffer>> | null;
 export declare const readFormData: () => Promise<FormData>;
 type WrappedReadValidatedBody = <T extends HTTPEvent, TEventInput = InferEventInput<"body", H3Event, T>>(...args: Tail<Parameters<typeof h3.readValidatedBody<T, H3Event, TEventInput>>>) => ReturnType<typeof h3.readValidatedBody<T, H3Event, TEventInput>>;
 export declare const readValidatedBody: PrependOverload<typeof h3.readValidatedBody, WrappedReadValidatedBody>;

package/dist/middleware/index.d.ts

@@ -13,9 +13,26 @@ export type ResponseMiddleware = (event: FetchEvent, response: ResponseMiddlewar
  * Creates middleware for handling requests and responses.
  *
  * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+/**
+ * Creates request/response middlewares via H3.
+ *
+ * Accepts an array of H3 {@link Middleware}
+ *
+ * @tip To run your middleware before response, `await next()` in your function block.
+ *@example
+ * const middleware = createMiddleware([
+ *   async (event, next) => {
+ *     const resp = await next();
+ *     if (resp instanceof Response) return resp;
+ *     return new Response("Not found", { status: 404 });
+ *   },
+ * ]);
+ *
  */
 export declare function createMiddleware(args: {
+    /** @deprecated Use H3 `Middleware` */
     onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
+    /** @deprecated Use H3 `Middleware` */
     onBeforeResponse?: ResponseMiddleware | ResponseMiddleware[] | undefined;
 } | Middleware[]): Middleware[];
 export {};

package/dist/middleware/index.js

@@ -23,6 +23,21 @@ function wrapResponseMiddleware(onBeforeResponse) {
  * Creates middleware for handling requests and responses.
  *
  * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+/**
+ * Creates request/response middlewares via H3.
+ *
+ * Accepts an array of H3 {@link Middleware}
+ *
+ * @tip To run your middleware before response, `await next()` in your function block.
+ *@example
+ * const middleware = createMiddleware([
+ *   async (event, next) => {
+ *     const resp = await next();
+ *     if (resp instanceof Response) return resp;
+ *     return new Response("Not found", { status: 404 });
+ *   },
+ * ]);
+ *
  */
 export function createMiddleware(args) {
     if (Array.isArray(args))

package/dist/server/handler.d.ts

@@ -1,6 +1,64 @@
-import { H3 } from "h3";
+import { type H3Event } 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;
+export declare function createBaseHandler(createPageEvent: (e: FetchEvent) => Promise<PageEvent>, fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): {
+    "~rou3": import("h3").RouterContext;
+    request(request: import("srvx").ServerRequest | URL | string, options?: RequestInit, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    use(route: string, handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    use(handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    on(method: import("h3").HTTPMethod | Lowercase<import("h3").HTTPMethod> | "", route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    register(plugin: import("h3").H3Plugin): /*elided*/ any;
+    mount(base: string, input: import("srvx").FetchHandler | {
+        fetch: import("srvx").FetchHandler;
+    } | /*elided*/ any): /*elided*/ any;
+    all(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    get(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    post(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    put(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    delete(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    patch(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    head(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    options(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    connect(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    trace(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    readonly config: import("h3").H3Config;
+    "~middleware": import("h3").Middleware[];
+    "~routes": import("h3").H3Route[];
+    fetch(_request: import("srvx").ServerRequest): Response | Promise<Response>;
+    handler(event: H3Event): unknown | Promise<unknown>;
+    "~request"(request: import("srvx").ServerRequest, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    "~findRoute"(_event: H3Event): import("h3").MatchedRoute<import("h3").H3Route> | void;
+    "~getMiddleware"(event: H3Event, route: import("h3").MatchedRoute<import("h3").H3Route> | undefined): import("h3").Middleware[];
+    "~addRoute"(_route: import("h3").H3Route): void;
+};
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): {
+    "~rou3": import("h3").RouterContext;
+    request(request: import("srvx").ServerRequest | URL | string, options?: RequestInit, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    use(route: string, handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    use(handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    on(method: import("h3").HTTPMethod | Lowercase<import("h3").HTTPMethod> | "", route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    register(plugin: import("h3").H3Plugin): /*elided*/ any;
+    mount(base: string, input: import("srvx").FetchHandler | {
+        fetch: import("srvx").FetchHandler;
+    } | /*elided*/ any): /*elided*/ any;
+    all(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    get(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    post(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    put(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    delete(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    patch(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    head(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    options(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    connect(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    trace(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    readonly config: import("h3").H3Config;
+    "~middleware": import("h3").Middleware[];
+    "~routes": import("h3").H3Route[];
+    fetch(_request: import("srvx").ServerRequest): Response | Promise<Response>;
+    handler(event: H3Event): unknown | Promise<unknown>;
+    "~request"(request: import("srvx").ServerRequest, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    "~findRoute"(_event: H3Event): import("h3").MatchedRoute<import("h3").H3Route> | void;
+    "~getMiddleware"(event: H3Event, route: import("h3").MatchedRoute<import("h3").H3Route> | undefined): import("h3").Middleware[];
+    "~addRoute"(_route: import("h3").H3Route): void;
+};
 export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/handler.js

@@ -1,12 +1,12 @@
 import middleware from "solid-start:middleware";
-import { defineHandler, getCookie, H3, redirect, setCookie } from "h3";
+import { defineHandler, getCookie, H3, redirect, setCookie } from "h3/generic";
 import { sharedConfig } from "solid-js";
 import { getRequestEvent, renderToStream, renderToString } from "solid-js/web";
 import { createRoutes } from "../router.jsx";
 import { decorateHandler, decorateMiddleware } from "./fetchEvent.js";
 import { getSsrManifest } from "./manifest/ssr-manifest.js";
 import { matchAPIRoute } from "./routes.js";
-import { handleServerFunction } from "./server-functions-handler.js";
+import { handleServerFunction } from "../fns/handler.js";
 import { getExpectedRedirectStatus } from "./util.js";
 const SERVER_FN_BASE = "/_server";
 export function createBaseHandler(createPageEvent, fn, options = {}) {
@@ -28,20 +28,22 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
             if (match) {
                 const mod = await match.handler.import();
                 const fn = event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
-                event.params = match.params || {};
-                // @ts-expect-error
-                sharedConfig.context = { event };
-                const res = await fn(event);
-                if (res !== undefined) {
-                    if (res instanceof Response)
-                        return produceResponseWithEventHeaders(res);
-                    return res;
+                if (typeof fn === "function") {
+                    event.params = match.params || {};
+                    // @ts-expect-error
+                    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") {
+                        throw new Error(`API handler for ${event.request.method} "${event.request.url}" did not return a response.`);
+                    }
+                    if (!match.isPage)
+                        return;
                 }
-                if (event.request.method !== "GET") {
-                    throw new Error(`API handler for ${event.request.method} "${event.request.url}" did not return a response.`);
-                }
-                if (!match.isPage)
-                    return;
             }
             const context = await createPageEvent(event);
             const resolvedOptions = typeof options === "function" ? await options(context) : { ...options };
@@ -178,7 +180,7 @@ function handleStreamCompleteRedirect(context) {
     return ({ write }) => {
         context.complete = true;
         const to = context.response && context.response.headers.get("Location");
-        to && write(`<script>window.location="${to}"</script>`);
+        to && write(`<script>window.location=${JSON.stringify(to).replace(/</g, "\\u003c")}</script>`);
     };
 }
 function produceResponseWithEventHeaders(res) {

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

@@ -4,4 +4,33 @@ import type { HandlerOptions, PageEvent } 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)): import("h3").H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)): {
+    "~rou3": import("h3").RouterContext;
+    request(request: import("srvx").ServerRequest | URL | string, options?: RequestInit, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    use(route: string, handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    use(handler: import("h3").Middleware, opts?: import("h3").MiddlewareOptions): /*elided*/ any;
+    on(method: import("h3").HTTPMethod | Lowercase<import("h3").HTTPMethod> | "", route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    register(plugin: import("h3").H3Plugin): /*elided*/ any;
+    mount(base: string, input: import("srvx").FetchHandler | {
+        fetch: import("srvx").FetchHandler;
+    } | /*elided*/ any): /*elided*/ any;
+    all(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    get(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    post(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    put(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    delete(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    patch(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    head(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    options(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    connect(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    trace(route: string, handler: import("h3").HTTPHandler, opts?: import("h3").RouteOptions): /*elided*/ any;
+    readonly config: import("h3").H3Config;
+    "~middleware": import("h3").Middleware[];
+    "~routes": import("h3").H3Route[];
+    fetch(_request: import("srvx").ServerRequest): Response | Promise<Response>;
+    handler(event: import("h3").H3Event): unknown | Promise<unknown>;
+    "~request"(request: import("srvx").ServerRequest, context?: import("h3").H3EventContext): Response | Promise<Response>;
+    "~findRoute"(_event: import("h3").H3Event): import("h3").MatchedRoute<import("h3").H3Route> | void;
+    "~getMiddleware"(event: import("h3").H3Event, route: import("h3").MatchedRoute<import("h3").H3Route> | undefined): import("h3").Middleware[];
+    "~addRoute"(_route: import("h3").H3Route): void;
+};

package/dist/server/types.d.ts

@@ -64,7 +64,7 @@ export interface APIEvent extends FetchEvent {
         [key: string]: string;
     };
 }
-export type APIHandler = (event: APIEvent) => Promise<any>;
+export type APIHandler = (event: APIEvent) => any;
 export interface ServerFunctionMeta {
     id: string;
 }

package/dist/shared/dev-overlay/CodeView.jsx

@@ -1,13 +1,13 @@
 // @refresh skip
 import { getSingletonHighlighter } from "shiki";
 import { loadWasm } from "shiki/engine/oniguruma";
-import { createEffect, createResource } from "solid-js";
-import url from "shiki/onig.wasm?url";
 import langJS from "shiki/langs/javascript.mjs";
 import langJSX from "shiki/langs/jsx.mjs";
 import langTSX from "shiki/langs/tsx.mjs";
 import langTS from "shiki/langs/typescript.mjs";
+import url from "shiki/onig.wasm?url";
 import darkPlus from "shiki/themes/dark-plus.mjs";
+import { createEffect, createResource } from "solid-js";
 let HIGHLIGHTER;
 async function loadHighlighter() {
     if (!HIGHLIGHTER) {
@@ -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.classList.add("dev-overlay-error-line");
+                    el.dataset.startDevOverlayErrorLine = '';
                 }
             }
         }
     });
-    return (<div ref={ref} class="dev-overlay-code-view" style={{
+    return (<div ref={ref} data-start-dev-overlay-code-view style={{
             "--dev-overlay-code-view-start": minLine() + 1,
         }}/>);
 }

package/dist/shared/dev-overlay/DevOverlayDialog.jsx

@@ -1,7 +1,7 @@
 // @refresh skip
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
-import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from "solid-js";
+import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
 import { Portal } from "solid-js/web";
 // @ts-ignore - terracotta module resolution issue with NodeNext
 import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
@@ -25,9 +25,9 @@ function ErrorInfo(props) {
         }
         return { message: e.toString() };
     });
-    return (<span class="dev-overlay-error-info">
-      <span class="dev-overlay-error-info-name">{error().name}</span>
-      <span class="dev-overlay-error-info-message">{error().message}</span>
+    return (<span data-start-dev-overlay-error-info>
+      <span data-start-dev-overlay-error-info-name>{error().name}</span>
+      <span data-start-dev-overlay-error-info-message>{error().message}</span>
     </span>);
 }
 function getFileName(source) {
@@ -46,23 +46,23 @@ function getFilePath(source) {
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return (<div class="dev-overlay-stack-frames-code-fallback">
+    return (<div data-start-dev-overlay-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>);
 }
 function StackFramesContent(props) {
     const stackframes = ErrorStackParser.parse(props.error);
     const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
-    return (<div class="dev-overlay-stack-frames-content">
-      <div class="dev-overlay-stack-frames-code">
+    return (<div data-start-dev-overlay-stack-frames-content>
+      <div data-start-dev-overlay-stack-frames-code>
         <ErrorBoundary fallback={null}>
           {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
             return (<Suspense fallback={<CodeFallback />}>
                 <Show when={data()} keyed fallback={<CodeFallback />}>
                   {source => (<>
-                      <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
-                      <div class="dev-overlay-stack-frames-code-container">
+                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
+                      <div data-start-dev-overlay-stack-frames-code-container>
                         <CodeView fileName={source.source} line={source.line} content={source.content}/>
                       </div>
                     </>)}
@@ -71,13 +71,13 @@ function StackFramesContent(props) {
         })()}
         </ErrorBoundary>
       </div>
-      <Select class="dev-overlay-stack-frames" value={selectedFrame()} onChange={setSelectedFrame}>
+      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<div class="dev-overlay-stack-frame">
-                  <span class="dev-overlay-stack-frame-function">
+          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
+                  <span data-start-dev-overlay-stack-frame-function>
                     {current.functionName ?? "<anonymous>"}
                   </span>
-                  <span class="dev-overlay-stack-frame-file">
+                  <span data-start-dev-overlay-stack-frame-file>
                     {getFilePath({
                     source: current.getFileName(),
                     content: "",
@@ -91,11 +91,11 @@ function StackFramesContent(props) {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {source => (<SelectOption class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">
+                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
+                          <span data-start-dev-overlay-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
+                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
@@ -165,55 +165,55 @@ export default function DevOverlayDialog(props) {
         window.open(DISCORD_INVITE, "_blank").focus();
     }
     return (<Portal>
-      <Dialog class="dev-overlay" isOpen>
+      <Dialog data-start-dev-overlay isOpen>
         <div>
-          <DialogOverlay class="dev-overlay-background"/>
-          <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">
+          <DialogOverlay data-start-dev-overlay-background/>
+          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
+            <div data-start-dev-overlay-panel>
+              <div data-start-dev-overlay-navbar>
+                <div data-start-dev-overlay-navbar-left>
+                  <div data-start-dev-overlay-version>
                     <div>
                       <SolidStartIcon title="Solid Start Version"/>
                     </div>
                     <span>{info.version}</span>
                   </div>
                   <Show when={props.errors.length > 1}>
-                    <div class="dev-overlay-pagination">
-                      <button class="dev-overlay-button" onClick={goPrev} type="button">
+                    <div data-start-dev-overlay-pagination>
+                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
                         <ArrowLeftIcon title="Go Previous"/>
                       </button>
-                      <div class="dev-overlay-page-counter">
+                      <div data-start-dev-overlay-page-counter>
                         {`${truncated()} of ${props.errors.length}`}
                       </div>
-                      <button class="dev-overlay-button" onClick={goNext} type="button">
+                      <button data-start-dev-overlay-button onClick={goNext} type="button">
                         <ArrowRightIcon title="Go Next"/>
                       </button>
                     </div>
                   </Show>
                 </div>
-                <div class="dev-overlay-controls">
-                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
+                <div data-start-dev-overlay-controls>
+                  <button data-start-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">
+                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
                     <DiscordIcon title="Join our Discord Channel"/>
                   </button>
-                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
+                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
                     <CameraIcon title="Capture Error Overlay"/>
                   </button>
-                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
+                  <button data-start-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">
+                  <button data-start-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">
+                {current => (<div data-start-dev-overlay-content>
                     <ErrorInfo error={current}/>
                     <StackFrames error={current} isCompiled={isCompiled()}/>
                   </div>)}

package/dist/shared/dev-overlay/index.jsx

@@ -1,7 +1,7 @@
 // @refresh skip
-import { ErrorBoundary, Show, createEffect, createSignal, onCleanup, resetErrorBoundaries, } from "solid-js";
-import { HttpStatusCode } from "../HttpStatusCode.js";
+import { createEffect, createSignal, ErrorBoundary, onCleanup, resetErrorBoundaries, Show, } from "solid-js";
 import clientOnly from "../clientOnly.js";
+import { HttpStatusCode } from "../HttpStatusCode.js";
 const DevOverlayDialog = import.meta.env.PROD
     ? () => <></>
     : clientOnly(() => import("./DevOverlayDialog"), { lazy: true });