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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @solidjs/start
 
+## 2.0.0-rc.2
+
+### Minor Changes
+
+- eeff49a: add new dev toolbar
+
+### Patch Changes
+
+- bd8cb01: Update srvx to version 0.12.0.
+- 4e98ac0: Restore the optional `routerLoad` third argument to `createHandler`, which primes custom routers (e.g. TanStack Router) on the server before SSR rendering. It was accidentally dropped in the v2 rewrite.
+
 ## 2.0.0-rc.1
 
 ### Minor Changes
@@ -144,6 +155,7 @@
 - 8256190: Rework `@solidjs/start/env`
 - 6cbba24: Fix multiple Set-Cookie headers being lost on redirect responses
 - d4cc548: ## Bump Seroval
+
   - version `1.4.1`
 
 - dd40610: Handle base url in api routes

package/dist/fns/client.js

@@ -1,10 +1,11 @@
+import { pushRequest, pushResponse } from "../shared/dev-toolbar/functions/tracker.js";
 import { 
 // serializeToJSONStream,
 serializeToJSONString, } from "./serialization.js";
-import { BODY_FORMAT_KEY, BodyFormat, extractBody, getHeadersAndBody, } from "./shared.js";
+import { BODY_FORMAT_KEY, BodyFormat, extractBody, getHeadersAndBody } from "./shared.js";
 let INSTANCE = 0;
-function createRequest(base, id, instance, options) {
-    return fetch(base, {
+async function createRequest(base, id, instance, options) {
+    const request = new Request(base, {
         method: "POST",
         ...options,
         headers: {
@@ -13,6 +14,15 @@ function createRequest(base, id, instance, options) {
             "X-Server-Instance": instance,
         },
     });
+    if (import.meta.env.DEV) {
+        console.log(pushRequest);
+        pushRequest(id, instance, request.clone());
+    }
+    const response = await fetch(request);
+    if (import.meta.env.DEV) {
+        pushResponse(id, instance, response.clone());
+    }
+    return response;
 }
 async function initializeResponse(base, id, instance, options, args) {
     // No args, skip serialization

package/dist/fns/handler.js

@@ -121,7 +121,6 @@ export async function handleServerFunction(h3Event) {
             h3Event.res.headers.set("content-type", "text/javascript");
             return serializeToJSStream(instance, result);
         }
-        h3Event.res.headers.set("content-type", "text/plain");
         return serializeToJSONStream(result);
     }
     catch (x) {
@@ -133,7 +132,8 @@ export async function handleServerFunction(h3Event) {
             if (x.headers)
                 mergeResponseHeaders(h3Event, x.headers);
             // forward non-redirect statuses
-            if (x.status && (!instance || x.status < 300 || x.status >= 400))
+            if (x.status &&
+                (!instance || x.status < 300 || x.status >= 400))
                 h3Event.res.status = x.status;
             if (x.customBody) {
                 x = await x.customBody();
@@ -166,7 +166,6 @@ export async function handleServerFunction(h3Event) {
                 h3Event.res.headers.set("content-type", "text/javascript");
                 return serializeToJSStream(instance, x);
             }
-            h3Event.res.headers.set("content-type", "text/plain");
             return serializeToJSONStream(x);
         }
         return x;
@@ -205,7 +204,10 @@ function handleNoJS(result, request, parsed, thrown) {
             result: isError ? result.message : result,
             thrown: thrown,
             error: isError,
-            input: [...parsed.slice(0, -1), [...parsed[parsed.length - 1].entries()]],
+            input: [
+                ...parsed.slice(0, -1),
+                [...parsed[parsed.length - 1].entries()],
+            ],
         }))}; Secure; HttpOnly;`);
     }
     return new Response(null, {
@@ -227,7 +229,7 @@ export function createSingleFlightHeaders(sourceEvent) {
     // 	useH3Internals = true;
     // 	sourceEvent.nativeEvent.node.req.headers.cookie = "";
     // }
-    SetCookies.forEach(cookie => {
+    SetCookies.forEach((cookie) => {
         if (!cookie)
             return;
         const { maxAge, expires, name, value } = parseSetCookie(cookie);

package/dist/fns/serialization.d.ts

@@ -1,5 +1,20 @@
 export declare function serializeToJSStream(id: string, value: any): ReadableStream<any>;
 export declare function serializeToJSONStream(value: any): ReadableStream<any>;
+export declare class SerovalChunkReader {
+    reader: ReadableStreamDefaultReader<Uint8Array>;
+    buffer: Uint8Array;
+    done: boolean;
+    constructor(stream: ReadableStream<Uint8Array>);
+    readChunk(): Promise<void>;
+    next(): Promise<{
+        done: true;
+        value: undefined;
+    } | {
+        done: false;
+        value: string;
+    }>;
+    drain(interpret: (chunk: string) => void): Promise<void>;
+}
 export declare function serializeToJSONString(value: any): Promise<string>;
 export declare function deserializeFromJSONString(json: string): Promise<unknown>;
 export declare function deserializeJSONStream(response: Response | Request): Promise<unknown>;

package/dist/fns/serialization.js

@@ -81,7 +81,7 @@ export function serializeToJSONStream(value) {
         },
     });
 }
-class SerovalChunkReader {
+export class SerovalChunkReader {
     reader;
     buffer;
     done;

package/dist/server/handler.d.ts

@@ -1,6 +1,6 @@
 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;
+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>): H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>), routerLoad?: (event: FetchEvent) => Promise<void>): H3;
 export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/handler.js

@@ -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) => {
@@ -47,6 +47,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";
@@ -104,8 +106,8 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
     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");

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

@@ -1,8 +1,8 @@
 import type { H3 } from "h3/generic";
 import type { JSX } from "solid-js";
-import type { HandlerOptions, PageEvent } from "../types.ts";
+import type { FetchEvent, 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)): H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions), routerLoad?: (event: FetchEvent) => Promise<void>): H3;

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