@solidjs/start 2.0.0-rc.1 → 2.0.0-rc.10

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";
@@ -11,7 +11,7 @@ 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) => {
@@ -19,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) {
@@ -36,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") {
@@ -47,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";
@@ -94,18 +89,17 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
             }
             if (mode === "async")
                 return await stream;
-            delete stream.then;
             // h3 expects a standard web ReadableStream across runtimes. The adapter
             // also tolerates cancellation while Solid finishes outstanding work.
-            return toWebReadableStream(stream);
+            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");
@@ -177,40 +171,16 @@ 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) {
     const base = import.meta.env.SERVER_BASE_URL || import.meta.env.BASE_URL || "/";

package/dist/server/index.d.ts

@@ -3,7 +3,8 @@ 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/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_URL)}/>
+              <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/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

@@ -5,5 +5,5 @@ type PipeableStream = {
     }): void;
 };
 /** Convert Solid's streaming SSR result into a cancellation-safe web stream. */
-export declare function toWebReadableStream(stream: PipeableStream): ReadableStream<Uint8Array>;
+export declare function toWebReadableStream(stream: PipeableStream): ReadableStream<Uint8Array<ArrayBufferLike>>;
 export {};

package/dist/server/web-stream.js

@@ -6,8 +6,11 @@ export function toWebReadableStream(stream) {
         start(controller) {
             stream.pipe({
                 write(payload) {
-                    if (active)
-                        controller.enqueue(encoder.encode(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)

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-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 {};

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

@@ -2,14 +2,12 @@
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
 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";
-import info from "../../../package.json" with { type: "json" };
+import IconButton from "../../ui/IconButton.jsx";
+import { Select, SelectOption } from "../../ui/Select.jsx";
+import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, ViewCompiledIcon, ViewOriginalIcon, } from "../icons.jsx";
 import { CodeView } from "./CodeView.jsx";
-import { createStackFrame } from "./createStackFrame.js";
+import { createStackFrame } from "./create-stack-frame.js";
 import download from "./download.js";
-import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon, } from "./icons.jsx";
 import "./styles.css";
 export function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
@@ -25,9 +23,9 @@ function ErrorInfo(props) {
         }
         return { message: e.toString() };
     });
-    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>
+    return (<span data-start-error-viewer-error-info>
+      <span data-start-error-viewer-error-info-name>{error().name}</span>
+      <span data-start-error-viewer-error-info-message>{error().message}</span>
     </span>);
 }
 function getFileName(source) {
@@ -46,23 +44,23 @@ function getFilePath(source) {
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return (<div data-start-dev-overlay-stack-frames-code-fallback>
+    return (<div data-start-error-viewer-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 data-start-dev-overlay-stack-frames-content>
-      <div data-start-dev-overlay-stack-frames-code>
+    return (<div data-start-error-viewer-stack-frames-content>
+      <div data-start-error-viewer-stack-frames-code>
         <ErrorBoundary fallback={null}>
           {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
             return (<Suspense fallback={<CodeFallback />}>
                 <Show when={data()} keyed fallback={<CodeFallback />}>
                   {source => (<>
-                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
-                      <div data-start-dev-overlay-stack-frames-code-container>
+                      <span data-start-error-viewer-stack-frames-code-source>{source.source}</span>
+                      <div data-start-error-viewer-stack-frames-code-container>
                         <CodeView fileName={source.source} line={source.line} content={source.content}/>
                       </div>
                     </>)}
@@ -71,13 +69,13 @@ function StackFramesContent(props) {
         })()}
         </ErrorBoundary>
       </div>
-      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
+      <Select data-start-error-viewer-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
-                  <span data-start-dev-overlay-stack-frame-function>
+          {current => (<ErrorBoundary fallback={<SelectOption value={current} disabled data-start-error-viewer-stack-frame>
+                  <span data-start-error-viewer-stack-frame-function>
                     {current.functionName ?? "<anonymous>"}
                   </span>
-                  <span data-start-dev-overlay-stack-frame-file>
+                  <span data-start-error-viewer-stack-frame-file>
                     {getFilePath({
                     source: current.getFileName(),
                     content: "",
@@ -86,16 +84,18 @@ function StackFramesContent(props) {
                     name: current.getFunctionName(),
                 })}
                   </span>
-                </div>}>
+                </SelectOption>}>
               {(() => {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
-                          <span data-start-dev-overlay-stack-frame-function>
+                      {source => (<SelectOption data-start-error-viewer-stack-frame value={current}>
+                          <span data-start-error-viewer-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
+                          <span data-start-error-viewer-stack-frame-file>
+                            {getFilePath(source)}
+                          </span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
@@ -112,7 +112,7 @@ function StackFrames(props) {
 }
 const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
 const DISCORD_INVITE = "https://discord.com/invite/solidjs";
-export default function DevOverlayDialog(props) {
+export default function ErrorViewer(props) {
     const [currentPage, setCurrentPage] = createSignal(1);
     const [isCompiled, setIsCompiled] = createSignal(false);
     const length = createMemo(() => props.errors.length);
@@ -164,63 +164,52 @@ export default function DevOverlayDialog(props) {
     function redirectToDiscord() {
         window.open(DISCORD_INVITE, "_blank").focus();
     }
-    return (<Portal>
-      <Dialog data-start-dev-overlay isOpen>
-        <div>
-          <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>
+    return (<Show when={props.show}>
+      <div data-start-dev-toolbar-panel>
+        <div ref={setPanel} data-start-error-viewer>
+          <div data-start-error-viewer-navbar>
+            <div data-start-error-viewer-navbar-left>
+              <Show when={props.errors.length > 1}>
+                <div data-start-error-viewer-pagination>
+                  <IconButton data-start-error-viewer-button onClick={goPrev} type="button">
+                    <ArrowLeftIcon title="Go Previous"/>
+                  </IconButton>
+                  <div data-start-error-viewer-page-counter>
+                    {`${truncated()} of ${props.errors.length}`}
                   </div>
-                  <Show when={props.errors.length > 1}>
-                    <div data-start-dev-overlay-pagination>
-                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
-                        <ArrowLeftIcon title="Go Previous"/>
-                      </button>
-                      <div data-start-dev-overlay-page-counter>
-                        {`${truncated()} of ${props.errors.length}`}
-                      </div>
-                      <button data-start-dev-overlay-button onClick={goNext} type="button">
-                        <ArrowRightIcon title="Go Next"/>
-                      </button>
-                    </div>
-                  </Show>
-                </div>
-                <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 data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
-                    <DiscordIcon title="Join our Discord Channel"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
-                    <CameraIcon title="Capture Error Overlay"/>
-                  </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 data-start-dev-overlay-button onClick={props.resetError} type="button">
-                    <RefreshIcon title="Reset Error"/>
-                  </button>
+                  <IconButton data-start-error-viewer-button onClick={goNext} type="button">
+                    <ArrowRightIcon title="Go Next"/>
+                  </IconButton>
                 </div>
-              </div>
-              <Show when={props.errors[truncated() - 1]} keyed>
-                {current => (<div data-start-dev-overlay-content>
-                    <ErrorInfo error={current}/>
-                    <StackFrames error={current} isCompiled={isCompiled()}/>
-                  </div>)}
               </Show>
             </div>
-          </DialogPanel>
+            <div data-start-error-viewer-controls>
+              <IconButton data-start-error-viewer-button onClick={redirectToGithub} type="button">
+                <GithubIcon title="Create an issue thread on Github"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={redirectToDiscord} type="button">
+                <DiscordIcon title="Join our Discord Channel"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={downloadScreenshot} type="button">
+                <CameraIcon title="Capture Error Overlay"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={toggleIsCompiled} type="button">
+                <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
+                  <ViewCompiledIcon title="View Compiled Source"/>
+                </Show>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={props.resetError} type="button">
+                <RefreshIcon title="Reset Error"/>
+              </IconButton>
+            </div>
+          </div>
+          <Show when={props.errors[truncated() - 1]} keyed>
+            {current => (<div data-start-error-viewer-content>
+                <ErrorInfo error={current}/>
+                <StackFrames error={current} isCompiled={isCompiled()}/>
+              </div>)}
+          </Show>
         </div>
-      </Dialog>
-    </Portal>);
+      </div>
+    </Show>);
 }