@solidjs/start 0.5.1 → 0.5.3

package/config/index.js

@@ -191,7 +191,7 @@ export function defineConfig(baseConfig = {}) {
       serverFunctions.router({
         handler: normalize(fileURLToPath(new URL("./server-handler.ts", import.meta.url))),
         runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.ts", import.meta.url))),
-        // routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
+        routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         plugins: async () => [
           config("user", {
             ...userConfig,

package/config/server-fns-runtime.ts

@@ -8,7 +8,7 @@ export function createServerReference(fn, id, name) {
   return new Proxy(fn, {
     get(target, prop, receiver) {
       if (prop === "url") {
-        return `${baseURL}/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
+        return `${baseURL}/_server/?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
       }
       if (prop === "GET") return receiver;
     },

package/config/server-handler.ts

@@ -1,5 +1,6 @@
 /// <reference types="vinxi/types/server" />
 import { crossSerializeStream, fromJSON, getCrossReferenceHeader } from "seroval";
+// @ts-ignore
 import {
   CustomEventPlugin,
   DOMExceptionPlugin,
@@ -13,10 +14,15 @@ import {
   URLSearchParamsPlugin
 } from "seroval-plugins/web";
 import { sharedConfig } from "solid-js";
+import { renderToStringAsync } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, setHeader } from "vinxi/http";
+import { eventHandler, setHeader, setResponseStatus } from "vinxi/http";
 import invariant from "vinxi/lib/invariant";
-import { getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
+import { cloneEvent, getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
+import { createPageEvent } from "../server/pageEvent";
+// @ts-ignore
+import App from "#start/app";
+import { FetchEvent, PageEvent } from "../server";
 
 function createChunk(data) {
   const bytes = data.length;
@@ -62,8 +68,9 @@ async function handleServerFunction(h3Event) {
   const event = getFetchEvent(h3Event);
   const request = event.request;
 
-  const serverReference = request.headers.get("x-server-id");
-  const instance = request.headers.get("x-server-instance");
+  const serverReference = request.headers.get("X-Server-Id");
+  const instance = request.headers.get("X-Server-Instance");
+  const singleFlight = request.headers.has("X-Single-Flight");
   const url = new URL(request.url);
   let filepath, name;
   if (serverReference) {
@@ -75,7 +82,7 @@ async function handleServerFunction(h3Event) {
     if (!filepath || !name) throw new Error("Invalid request");
   }
 
-  const action = (
+  const serverFunction = (
     await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
   )[name];
   let parsed = [];
@@ -93,13 +100,15 @@ async function handleServerFunction(h3Event) {
     ) {
       // workaround for https://github.com/unjs/nitro/issues/1721
       // (issue only in edge runtimes)
-      parsed.push(await new Request(request, { ...request, body: h3Event.node.req.body }).formData());
-      // what should work when #1721 is fixed 
+      parsed.push(
+        await new Request(request, { ...request, body: h3Event.node.req.body }).formData()
+      );
+      // what should work when #1721 is fixed
       // parsed.push(await request.formData);
     } else {
       // workaround for https://github.com/unjs/nitro/issues/1721
       // (issue only in edge runtimes)
-      const tmpReq = new Request(request, { ...request, body: h3Event.node.req.body })
+      const tmpReq = new Request(request, { ...request, body: h3Event.node.req.body });
       // what should work when #1721 is fixed
       // just use request.json() here
       parsed = fromJSON(await tmpReq.json(), {
@@ -119,27 +128,23 @@ async function handleServerFunction(h3Event) {
     }
   }
   try {
-    let result = await provideRequestEvent(event, () => {
+    let result = await provideRequestEvent(event, async () => {
       /* @ts-ignore */
       sharedConfig.context = { event };
-      return action(...parsed);
+      return serverFunction(...parsed);
     });
 
+    if (singleFlight && instance) {
+      result = await handleSingleFlight(event, result);
+    }
+
     // handle responses
-    if (result instanceof Response) {
-      if (result.status === 302) {
-        return new Response(null, {
-          status: instance ? 204 : 302,
-          headers: {
-            Location: result.headers.get("Location")
-          }
-        });
-      }
+    if (result instanceof Response && instance) {
       // forward headers
       if (result.headers) mergeResponseHeaders(h3Event, result.headers);
       if ((result as any).customBody) {
         result = await (result as any).customBody();
-      } else if (result.body == undefined) result = undefined;
+      } else if (result.body == undefined) result = null;
     }
 
     // handle no JS success case
@@ -163,27 +168,63 @@ async function handleServerFunction(h3Event) {
         }
       });
     }
-    if (typeof result === "string") return new Response(result);
+    if (!result || typeof result === "string") return result || null;
     setHeader(h3Event, "content-type", "text/javascript");
     return serializeToStream(instance, result);
   } catch (x) {
     if (x instanceof Response) {
-      if (x.status === 302) {
-        return new Response(null, {
-          status: instance ? 204 : 302,
-          headers: {
-            Location: x.headers.get("Location")
-          }
-        });
-      }
+      if (x.status === 302 && !instance) setResponseStatus(h3Event, 302);
       // forward headers
       if (x.headers) mergeResponseHeaders(h3Event, x.headers);
       if ((x as any).customBody) {
         x = await (x as any).customBody();
-      } else if (x.body == undefined) x = undefined;
+      } else if (x.body == undefined) x = null;
     }
     return x;
   }
 }
 
+async function handleSingleFlight(sourceEvent: FetchEvent, result: any) {
+  let revalidate;
+  let url = new URL(sourceEvent.request.headers.get("referer")).toString();
+  if (result instanceof Response) {
+    if (result.headers.has("X-Revalidate"))
+      revalidate = result.headers.get("X-Revalidate").split(",");
+    if (result.headers.has("Location"))
+      url = new URL(
+        result.headers.get("Location"),
+        new URL(sourceEvent.request.url).origin + import.meta.env.SERVER_BASE_URL
+      ).toString();
+  }
+  const event = cloneEvent(sourceEvent) as PageEvent;
+  event.request = new Request(url);
+  return await provideRequestEvent(event, async () => {
+    await createPageEvent(event);
+    /* @ts-ignore */
+    sharedConfig.context = { event };
+    /* @ts-ignore */
+    event.router.dataOnly = revalidate || true;
+    /* @ts-ignore */
+    event.router.previousUrl = sourceEvent.request.headers.get("referer");
+    renderToStringAsync(App);
+    /* @ts-ignore */
+    const body = event.router.data;
+    if (body) {
+      let containsKey = false;
+      for (const key in body) {
+        if (body[key] === undefined) delete body[key];
+        else containsKey = true;
+      }
+      if (!containsKey) return result;
+      if (!(result instanceof Response)) {
+        body["_$value"] = result;
+        result = new Response(null, { status: 200 });
+      }
+      result.customBody = () => body;
+      result.headers.set("X-Single-Flight", "true");
+      return result;
+    }
+  });
+}
+
 export default eventHandler(handleServerFunction);

package/config/server-runtime.ts

@@ -109,33 +109,32 @@ async function deserializeStream(id, response) {
 
 let INSTANCE = 0;
 
-function createRequest(base: string, id: string, instance: string, body: any, contentType?: string) {
+function createRequest(base: string, id: string, instance: string, options: RequestInit) {
   return fetch(base, {
     method: "POST",
+    ...options,
     headers: {
-      "x-server-id": id,
-      "x-server-instance": instance,
-      ...(contentType ? { "Content-Type": contentType } : {})
-    },
-    body
+      ...options.headers,
+      "X-Server-Id": id,
+      "X-Server-Instance": instance
+    }
   });
 }
 
-async function fetchServerFunction(base, id, method, args) {
+async function fetchServerFunction(
+  base: string,
+  id: string,
+  options: Omit<RequestInit, "body">,
+  args: any[]
+) {
   const instance = `server-fn:${INSTANCE++}`;
-  const response = await (method === "GET"
-    ? fetch(base + (args.length ? `&args=${JSON.stringify(args)}` : ""), {
-        headers: {
-          "x-server-instance": instance
-        }
-      })
+  const response = await (args.length === 0
+    ? createRequest(base, id, instance, options)
     : args.length === 1 && args[0] instanceof FormData
-    ? createRequest(base, id, instance, args[0])
-    : createRequest(
-        base,
-        id,
-        instance,
-        JSON.stringify(
+    ? createRequest(base, id, instance, { ...options, body: args[0] })
+    : createRequest(base, id, instance, {
+        ...options,
+        body: JSON.stringify(
           await Promise.resolve(
             toJSONAsync(args, {
               plugins: [
@@ -153,17 +152,23 @@ async function fetchServerFunction(base, id, method, args) {
             })
           )
         ),
-        "application/json"
-      ));
-
-  if (response.headers.get("Location")) throw response;
-  if (response.headers.get("X-Revalidate")) {
-    /* @ts-ignore-next-line */
-    response.customBody = () => {
-      return deserializeStream(instance, response);
-    };
-    throw response;
+        headers: { ...options.headers, "Content-Type": "application/json" }
+      }));
+
+  if (
+    response.headers.get("Location") ||
+    response.headers.get("X-Revalidate") ||
+    response.headers.get("X-Single-Flight")
+  ) {
+    if (response.body) {
+      /* @ts-ignore-next-line */
+      response.customBody = () => {
+        return deserializeStream(instance, response);
+      };
+    }
+    return response;
   }
+
   const contentType = response.headers.get("Content-Type");
   let result;
   if (contentType && contentType.startsWith("text/plain")) {
@@ -184,14 +189,31 @@ export function createServerReference(fn, id, name) {
   return new Proxy(fn, {
     get(target, prop, receiver) {
       if (prop === "url") {
-        return `${baseURL}/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
+        return `${baseURL}/_server/?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
       }
       if (prop === "GET") {
-        return (...args) => fetchServerFunction(`${baseURL}/_server/?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`, `${id}#${name}`, "GET", args);
+        return receiver.withOptions({ method: "GET" });
+      }
+      if (prop === "withOptions") {
+        return (options: RequestInit) => {
+          const fn = (...args) => {
+            const encodeArgs = options.method && options.method.toUpperCase() === "GET";
+            return fetchServerFunction(
+              encodeArgs
+                ? receiver.url + (args.length ? `&args=${JSON.stringify(args)}` : "")
+                : `${baseURL}/_server`,
+              `${id}#${name}`,
+              options,
+              encodeArgs ? [] : args
+            );
+          };
+          fn.url = receiver.url;
+          return fn;
+        };
       }
     },
     apply(target, thisArg, args) {
-      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, "POST", args);
+      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, {}, args);
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -42,7 +42,7 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.13",
+    "solid-js": "^1.8.14",
     "vinxi": "^0.2.1"
   },
   "dependencies": {

package/server/fetchEvent.ts

@@ -74,21 +74,21 @@ class HeaderProxy {
     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));
+    return Object.entries<string | string[]>(getResponseHeaders(this.event)).forEach(([key, value]) => fn(Array.isArray(value) ? value.join(", ") : value, key, this));
   }
   entries() {
-    return getResponseHeaders(this.event).map(([key, value]) => [
+    return Object.entries<string | string[]>(getResponseHeaders(this.event)).map(([key, value]) => [
       key,
       Array.isArray(value) ? value.join(", ") : value
-    ]);
+    ] as [string, string])[Symbol.iterator]();
   }
   keys() {
-    return getResponseHeaders(this.event).map(([key]) => key);
+    return Object.keys(getResponseHeaders(this.event))[Symbol.iterator]();
   }
   values() {
-    return getResponseHeaders(this.event).map(([key, value]) =>
+    return Object.values<string | string[]>(getResponseHeaders(this.event)).map((value) =>
       Array.isArray(value) ? value.join(", ") : value
-    );
+    )[Symbol.iterator]();
   }
   [Symbol.iterator]() {
     return this.entries()[Symbol.iterator]();

package/shared/ErrorBoundary.tsx

@@ -1,24 +1,13 @@
-import {
-  ErrorBoundary as DefaultErrorBoundary,
-  ParentProps,
-} from "solid-js";
+import { ErrorBoundary as DefaultErrorBoundary, type ParentProps } from "solid-js";
 import { HttpStatusCode } from "./HttpStatusCode";
 import { DevOverlay } from "./dev-overlay";
 
 export function ErrorBoundary(props: ParentProps) {
   if (import.meta.env.DEV) {
-    return (
-      <DevOverlay>
-        {props.children}
-      </DevOverlay>
-    );
+    return <DevOverlay>{props.children}</DevOverlay>;
   }
   return (
-    <DefaultErrorBoundary
-      fallback={(
-        <HttpStatusCode code={500} />
-      )}
-    >
+    <DefaultErrorBoundary fallback={<HttpStatusCode code={500} />}>
       {props.children}
     </DefaultErrorBoundary>
   );