@solidjs/start 0.4.10 → 0.5.0

package/{server/middleware.ts → middleware/index.ts}

@@ -1,59 +1,25 @@
 import {
-  defineMiddleware,
-  getRequestIP,
   H3Event,
-  sendWebResponse,
-  toWebRequest
+  defineMiddleware,
+  sendWebResponse
 } from "vinxi/server";
-import { FetchEvent } from "./types";
-
-const h3EventSymbol = Symbol("h3Event");
-const fetchEventSymbol = Symbol("fetchEvent");
-const eventTraps = {
-  get(target, prop) {
-    if (prop === fetchEventSymbol) return target;
-    return target[prop] ?? target[h3EventSymbol][prop];
-  }
-};
-
-export function createFetchEvent(event: H3Event): FetchEvent {
-  const request = toWebRequest(event);
-  return new Proxy(
-    {
-      request: request,
-      clientAddress: getRequestIP(event),
-      locals: {},
-      // @ts-ignore
-      [h3EventSymbol]: event
-    },
-    eventTraps
-  ) as unknown as FetchEvent;
-}
-
-export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
-  return new Proxy({ ...fetchEvent[fetchEventSymbol] }, eventTraps);
-}
-
-export function getFetchEvent(h3Event: H3Event): FetchEvent {
-  if (!h3Event[fetchEventSymbol]) {
-    const fetchEvent = createFetchEvent(h3Event);
-    h3Event[fetchEventSymbol] = fetchEvent;
-    // @ts-ignore
-  }
-
-  return h3Event[fetchEventSymbol];
-}
+import { getFetchEvent } from "../server/fetchEvent";
+import type { FetchEvent } from "../server/types";
 
 /** Function responsible for receiving an observable [operation]{@link Operation} and returning a [result]{@link OperationResult}. */
 
 export type MiddlewareFn = (event: FetchEvent) => Promise<unknown> | unknown;
 /** This composes an array of Exchanges into a single ExchangeIO function */
 
-type RequestMiddleware = (event: FetchEvent) => Response | Promise<Response> | void | Promise<void>;
+export type RequestMiddleware = (event: FetchEvent) => Response | Promise<Response> | void | Promise<void>;
+
+// copy-pasted from h3/dist/index.d.ts
+type EventHandlerResponse<T = any> = T | Promise<T>;
+type ResponseMiddlewareResponseParam = { body?: Awaited<EventHandlerResponse> };
 
-type ResponseMiddleware = (
+export type ResponseMiddleware = (
   event: FetchEvent,
-  response: Response
+  response: ResponseMiddlewareResponseParam
 ) => Response | Promise<Response> | void | Promise<void>;
 
 function wrapRequestMiddleware(onRequest: RequestMiddleware) {
@@ -69,7 +35,7 @@ function wrapRequestMiddleware(onRequest: RequestMiddleware) {
 }
 
 function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware) {
-  return async (h3Event: H3Event, response: Response) => {
+  return async (h3Event: H3Event, response: ResponseMiddlewareResponseParam) => {
     const fetchEvent = getFetchEvent(h3Event);
     const mwResponse = await onBeforeResponse(fetchEvent, response);
     if (!mwResponse) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.10",
+  "version": "0.5.0",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "files": [
     "client",
     "config",
-    "entry",
+    "middleware",
     "server",
     "shared",
     "*.d.ts"
@@ -18,8 +18,7 @@
   "exports": {
     ".": "./shared/index.tsx",
     "./config": "./config/index.js",
-    "./entry": "./entry/index.ts",
-    "./entry/spa": "./entry/spa/index.ts",
+    "./middleware": "./middleware/index.ts",
     "./server": "./server/index.tsx",
     "./server/spa": "./server/spa/index.tsx",
     "./client": "./client/index.tsx",
@@ -31,8 +30,8 @@
       ".": [
         "./shared/index.tsx"
       ],
-      "./entry": [
-        "./entry/index.ts"
+      "./middleware": [
+        "./middleware/index.ts"
       ],
       "./server": [
         "./server/index.tsx"
@@ -43,23 +42,24 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.11",
-    "vinxi": "^0.1.4"
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.2.1"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "^0.1.2",
-    "@vinxi/server-components": "^0.1.2",
-    "@vinxi/server-functions": "^0.1.2",
+    "@vinxi/plugin-directives": "^0.2.0",
+    "@vinxi/server-components": "^0.2.0",
+    "@vinxi/server-functions": "^0.2.1",
     "defu": "^6.1.2",
     "error-stack-parser": "^2.1.4",
     "html-to-image": "^1.11.11",
+    "radix3": "^1.1.0",
     "seroval": "^1.0.2",
     "seroval-plugins": "^1.0.2",
     "shikiji": "^0.9.12",
     "source-map-js": "^1.0.2",
     "terracotta": "^1.0.4",
     "vite-plugin-inspect": "^0.7.33",
-    "vite-plugin-solid": "^2.8.0"
+    "vite-plugin-solid": "^2.9.1"
   },
   "scripts": {
     "typecheck": "tsc --noEmit --checkJs false --skipLibCheck"

package/server/StartServer.tsx

@@ -35,9 +35,9 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
 
   let assets = [];
   Promise.resolve().then(async () => {
-    if (context.routerMatches && context.routerMatches[0]) {
-      const matches = [...context.routerMatches[0]];
-      while (matches.length && (!matches[0].metadata || !matches[0].metadata.filesystem))
+    if (context.router && context.router.matches) {
+      const matches = [...context.router.matches];
+      while (matches.length && (!matches[0].info || !matches[0].info.filesystem))
         matches.shift();
       const matched = matches.length && matchRoute(matches, context.routes);
       if (matched) {

package/server/fetchEvent.ts

@@ -0,0 +1,115 @@
+import {
+  H3Event,
+  HTTPEventSymbol,
+  appendResponseHeader,
+  getRequestIP,
+  getResponseHeader,
+  getResponseHeaders,
+  getResponseStatus,
+  getResponseStatusText,
+  removeResponseHeader,
+  setHeader,
+  setResponseHeader,
+  setResponseStatus,
+  toWebRequest
+} from "vinxi/server";
+import type { FetchEvent, ResponseStub } from "./types";
+
+const fetchEventSymbol = Symbol("fetchEvent");
+
+export function createFetchEvent(event: H3Event): FetchEvent {
+  const request = toWebRequest(event);
+  return {
+    request: request,
+    response: createResponseStub(event),
+    clientAddress: getRequestIP(event),
+    locals: {},
+    nativeEvent: event,
+    [HTTPEventSymbol]: event
+  };
+}
+
+export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
+  return {
+    ...fetchEvent,
+    [HTTPEventSymbol]: fetchEvent[HTTPEventSymbol]
+  };
+}
+
+export function getFetchEvent(h3Event: H3Event): FetchEvent {
+  if (!h3Event[fetchEventSymbol]) {
+    const fetchEvent = createFetchEvent(h3Event);
+    h3Event[fetchEventSymbol] = fetchEvent;
+    // @ts-ignore
+  }
+
+  return h3Event[fetchEventSymbol];
+}
+
+export function mergeResponseHeaders(h3Event, headers) {
+  for (const [key, value] of headers.entries()) {
+    setHeader(h3Event, key, value);
+  }
+}
+
+class HeaderProxy {
+  constructor(private event: H3Event) {}
+  get(key: string) {
+    const h = getResponseHeader(this.event, key);
+    return Array.isArray(h) ? h.join(", ") : h;
+  }
+  has(key: string) {
+    return this.get(key) !== undefined;
+  }
+  set(key: string, value: string) {
+    return setResponseHeader(this.event, key, value);
+  }
+  delete(key: string) {
+    return removeResponseHeader(this.event, key);
+  }
+  append(key: string, value: string) {
+    appendResponseHeader(this.event, key, value);
+  }
+  getSetCookie() {
+    const cookies = getResponseHeader(this.event, "Set-Cookie");
+    return Array.isArray(cookies) ? cookies : [cookies];
+  }
+  forEach(fn: (value: string, key: string, object: Headers) => void) {
+    return this.entries().forEach(([key, value]) => fn(value, key, this));
+  }
+  entries() {
+    return getResponseHeaders(this.event).map(([key, value]) => [
+      key,
+      Array.isArray(value) ? value.join(", ") : value
+    ]);
+  }
+  keys() {
+    return getResponseHeaders(this.event).map(([key]) => key);
+  }
+  values() {
+    return getResponseHeaders(this.event).map(([key, value]) =>
+      Array.isArray(value) ? value.join(", ") : value
+    );
+  }
+  [Symbol.iterator]() {
+    return this.entries()[Symbol.iterator]();
+  }
+}
+
+function createResponseStub(event: H3Event): ResponseStub {
+  return {
+    get status() {
+      return getResponseStatus(event);
+    },
+    set status(v) {
+      setResponseStatus(event, v);
+    },
+    get statusText() {
+      return getResponseStatusText(event);
+    },
+    set statusText(v) {
+      setResponseStatus(event, getResponseStatus(), v);
+    },
+    headers: new HeaderProxy(event)
+  };
+}

package/{entry/index.ts → server/handler.ts}

@@ -1,21 +1,19 @@
 import { sharedConfig } from "solid-js";
-import { renderToStream } from "solid-js/web";
+import { renderToStream, renderToString } from "solid-js/web";
 /* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import {
   EventHandlerObject,
   EventHandlerRequest,
   H3Event,
-  HTTPMethod,
   eventHandler,
   sendRedirect,
   setHeader,
   setResponseStatus
 } from "vinxi/server";
-import { getFetchEvent } from "../server/middleware";
-import { createPageEvent } from "../server/page-event";
-import { APIEvent, FetchEvent, PageEvent } from "../server/types";
-import { matchAPIRoute } from "../shared/routes";
+import { getFetchEvent } from "./fetchEvent";
+import { createPageEvent } from "./pageEvent";
+import { FetchEvent, PageEvent } from "./types";
 
 export function createBaseHandler(
   fn: (context: PageEvent) => unknown,
@@ -35,21 +33,21 @@ export function createBaseHandler(
     onBeforeResponse: options.onBeforeResponse,
     handler: (e: H3Event<EventHandlerRequest> & { startEvent: FetchEvent }) => {
       const event = getFetchEvent(e);
+      const mode = import.meta.env.START_SSR;
 
       return provideRequestEvent(event, async () => {
-        // api
-        const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method as HTTPMethod)
-        if (match) {
-          const mod = await match.handler.import();
-          const fn = mod[event.request.method];
-          (event as APIEvent).params = match.params;
-          sharedConfig.context = { event } as any;
-          return await fn(event);
-        }
-
-        // render stream
-        const doAsync = import.meta.env.START_SSR === "async";
+        // render
         const context = await createPageEvent(event);
+        if (mode === "sync") {
+          const html = renderToString(() => {
+            (sharedConfig.context as any).event = context;
+            return fn(context);
+          }, options);
+          if (context.response && context.response.headers.get("Location")) {
+            return sendRedirect(event, context.response.headers.get("Location"));
+          }
+          return html;
+        }
         let cloned = { ...options };
         if (cloned.onCompleteAll) {
           const og = cloned.onCompleteAll;
@@ -72,7 +70,7 @@ export function createBaseHandler(
         if (context.response && context.response.headers.get("Location")) {
           return sendRedirect(event, context.response.headers.get("Location"));
         }
-        if (doAsync) return stream;
+        if (mode === "async") return stream;
         // fix cloudflare streaming
         const { writable, readable } = new TransformStream();
         stream.pipeTo(writable);

package/server/index.tsx

@@ -1,4 +1,4 @@
-export * from "vinxi/server";
 export { StartServer } from "./StartServer";
-export * from "./middleware";
+export { createHandler } from "./handler";
 export * from "./types";
+

package/server/{page-event.tsx → pageEvent.ts}

@@ -1,11 +1,6 @@
 import {
-  appendResponseHeader,
   getCookie,
-  getResponseHeader,
-  removeResponseHeader,
-  setCookie,
-  setResponseHeader,
-  setResponseStatus
+  setCookie
 } from "vinxi/server";
 import { createRoutes } from "../shared/FileRoutes";
 import { FetchEvent, PageEvent } from "./types";
@@ -27,7 +22,7 @@ function initFromFlash(ctx: FetchEvent) {
 export async function createPageEvent(ctx: FetchEvent) {
   const clientManifest = import.meta.env.MANIFEST["client"];
   const serverManifest = import.meta.env.MANIFEST["ssr"];
-  setResponseHeader(ctx, "Content-Type", "text/html");
+  ctx.response.headers.set("Cache-Control", "no-cache");
   // const prevPath = ctx.request.headers.get("x-solid-referrer");
   // const mutation = ctx.request.headers.get("x-solid-mutation") === "true";
   const pageEvent: PageEvent = Object.assign(ctx, {
@@ -40,36 +35,10 @@ export async function createPageEvent(ctx: FetchEvent) {
           )
         : [])
     ],
-    initialSubmission: initFromFlash(ctx),
-    routes: createRoutes(),
-    components: {
-      status: props => {
-        setResponseStatus(ctx, props.code, props.text);
-        return () => setResponseStatus(ctx, 200);
-      },
-      header: props => {
-        if (props.append) {
-          appendResponseHeader(ctx, props.name, props.value);
-        } else {
-          setResponseHeader(ctx, props.name, props.value);
-        }
-
-        return () => {
-          const value = getResponseHeader(ctx, props.name);
-
-          // Todo: review this logic still the same in H3
-          // H3 supports arrays so its possible there is no need to split..
-          // typeof check here is to guard but ultimately may be unneeded
-          if (value && typeof value === "string") {
-            const values = value.split(", ");
-            const index = values.indexOf(props.value);
-            index !== -1 && values.splice(index, 1);
-            if (values.length) setResponseHeader(ctx, props.name, values.join(", "));
-            else removeResponseHeader(ctx, props.name);
-          }
-        };
-      }
+    router: {
+      submission: initFromFlash(ctx)
     },
+    routes: createRoutes(),
     // prevUrl: prevPath || "",
     // mutation: mutation,
     // $type: FETCH_EVENT,

package/{entry/spa/index.ts → server/spa/handler.ts}

@@ -1,5 +1,5 @@
-import { createBaseHandler } from "..";
-import { FetchEvent, PageEvent } from "../../server/types";
+import { createBaseHandler } from "../handler";
+import { FetchEvent, PageEvent } from "../types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,

package/server/spa/index.tsx

@@ -1,5 +1,4 @@
-export * from "vinxi/server";
-export * from "../middleware";
 export * from "../types";
 export { StartServer } from "./StartServer";
+export { createHandler } from "./handler";
 

package/server/types.ts

@@ -1,5 +1,5 @@
 import type { JSX } from "solid-js";
-import type { EventHandlerRequest, H3Event } from "vinxi/server";
+import { HTTPEventSymbol, type EventHandlerRequest, type H3Event } from "vinxi/server";
 
 // export const FETCH_EVENT = "$FETCH";
 
@@ -16,10 +16,21 @@ export type ContextMatches = {
   params: unknown;
 };
 
-export interface FetchEvent extends H3Event<EventHandlerRequest> {
+export interface ResponseStub {
+  status?: number;
+  statusText?: string;
+  headers: Headers;
+}
+export interface FetchEvent {
   request: Request;
+  response: ResponseStub;
   clientAddress: string;
-  locals: Record<string, unknown>;
+  locals: RequestEventLocals;
+  nativeEvent: H3Event<EventHandlerRequest>;
+  [HTTPEventSymbol]: H3Event<EventHandlerRequest>;
+}
+export interface RequestEventLocals {
+  [key: string | symbol]: any;
 }
 export interface PageEvent extends FetchEvent {
   manifest: any;
@@ -29,7 +40,6 @@ export interface PageEvent extends FetchEvent {
   // $type: typeof FETCH_EVENT;
   $islands: Set<string>;
   // mutation: boolean;
-  response?: Response;
 }
 
 export interface APIEvent extends FetchEvent {

package/shared/FileRoutes.tsx

@@ -10,8 +10,8 @@ export function createRoutes() {
     return {
       ...route,
       ...(route.$$route ? route.$$route.require().route : undefined),
-      metadata: {
-        ...(route.$$route ? route.$$route.require().route.metadata : {}),
+      info: {
+        ...(route.$$route ? route.$$route.require().route.info : {}),
         filesystem: true
       },
       component: lazyRoute(

package/shared/GET.ts

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

package/shared/HttpHeader.tsx

@@ -4,7 +4,24 @@ import { getRequestEvent, isServer } from "solid-js/web";
 export function HttpHeader(props: { name: string; value: string; append?: boolean }) {
   if (isServer) {
     const event = getRequestEvent();
-    if (event) onCleanup((event as any).components.header(props));
+
+    if (props.append) event.response.headers.append(props.name, props.value);
+    else event.response.headers.set(props.name, props.value);
+
+    onCleanup(() => {
+      if (event.nativeEvent.handled) return;
+      const value = event.response.headers.get(props.name);
+      if (!value) return;
+      if (!value.includes(", ")) {
+        if (value === props.value) event.response.headers.delete(props.name);
+        return;
+      }
+      const values = value.split(", ");
+      const index = values.indexOf(props.value);
+      index !== -1 && values.splice(index, 1);
+      if (values.length) event.response.headers.set(props.name, values.join(","));
+      else event.response.headers.delete(props.name);
+    });
   }
 
   return null;

package/shared/HttpStatusCode.tsx

@@ -4,7 +4,9 @@ import { getRequestEvent, isServer } from "solid-js/web";
 export function HttpStatusCode(props: { code: number, text?: string }) {
   if (isServer) {
     const event = getRequestEvent();
-    if (event) onCleanup((event as any).components.status(props));
+    event.response.status = props.code;
+    event.response.statusText = props.text;
+    onCleanup(() => !event.nativeEvent.handled && (event.response.status = 200));
   }
   return null;
 }

package/shared/dev-overlay/DevOverlayDialog.tsx

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