@solidjs/start 0.4.10 → 0.5.0

package/config/api-handler.ts

@@ -0,0 +1,64 @@
+/// <reference types="vinxi/types/server" />
+import { createRouter } from "radix3";
+import { sharedConfig } from "solid-js";
+import fileRoutes from "vinxi/routes";
+
+// @ts-ignore
+import { provideRequestEvent } from "solid-js/web/storage";
+import { eventHandler } from "vinxi/server";
+import { getFetchEvent } from "../server/fetchEvent";
+import { APIEvent } from "../server/types";
+
+export default eventHandler(h3Event => {
+  const event = getFetchEvent(h3Event);
+  const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method);
+  if (match) {
+    return provideRequestEvent(event, async () => {
+      const mod = await match.handler.import();
+      const fn = mod[event.request.method];
+      (event as APIEvent).params = match.params;
+      // @ts-ignore
+      sharedConfig.context = { event };
+      const res = await fn(event);
+      if (res === undefined && event.request.method !== "GET") {
+        throw new Error(
+          `API handler for ${event.request.method} "${event.request.url}" did not return a response.`
+        );
+      }
+      return res;
+    });
+  }
+});
+
+interface Route {
+  path: string;
+  id: string;
+  type: "api" | "page";
+  children?: Route[];
+}
+
+const router = createRouter({
+  routes: (fileRoutes as unknown as Route[]).reduce((memo, route) => {
+    if (route.type !== "api") return memo;
+    const path = route.path.replace(/\(.*\)\/?/g, "");
+    if (memo[path]) {
+      throw new Error(
+        `Duplicate API routes for "${path}" found at "${memo[path].route.path}" and "${route.path}"`
+      );
+    }
+    memo[path] = { route };
+    return memo;
+  }, {} as Record<string, { route: Route }>)
+});
+
+function matchAPIRoute(path: string, method: string) {
+  const match = router.lookup(path);
+  if (match) {
+    const handler = match.route[`$${method}`];
+    if (handler === "skip" || handler === undefined) return;
+    return {
+      handler,
+      params: match.params
+    };
+  }
+}

package/config/fs-router.js

@@ -57,19 +57,7 @@ export class SolidStartClientFileRouter extends BaseFileSystemRouter {
     }
   }
 }
-const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
-function createHTTPHandlers(src, exports) {
-  const handlers = {};
-  for (const exp of exports) {
-    if (HTTP_METHODS.includes(exp.n)) {
-      handlers[`$${exp.n}`] = {
-        src: src,
-        pick: [exp.n]
-      };
-    }
-  }
-  return handlers;
-}
+
 export class SolidStartServerFileRouter extends BaseFileSystemRouter {
   toPath(src) {
     const routePath = cleanPath(src, this.config)
@@ -123,7 +111,44 @@ export class SolidStartServerFileRouter extends BaseFileSystemRouter {
         path,
         filePath: src
       };
-    } else if (exports.find(exp => HTTP_METHODS.includes(exp.n))) {
+    }
+  }
+}
+
+const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+function createHTTPHandlers(src, exports) {
+  const handlers = {};
+  for (const exp of exports) {
+    if (HTTP_METHODS.includes(exp.n)) {
+      handlers[`$${exp.n}`] = {
+        src: src,
+        pick: [exp.n]
+      };
+    }
+  }
+  return handlers;
+}
+
+export class SolidStartAPIFileRouter extends BaseFileSystemRouter {
+  toPath(src) {
+    const routePath = cleanPath(src, this.config)
+      // remove the initial slash
+      .slice(1)
+      .replace(/index$/, "")
+      .replace(/\[([^\/]+)\]/g, (_, m) => {
+        if (m.length > 2 && m.startsWith("...")) {
+          return `**${m.length > 3 ? ":" + m.slice(3) : ""}`;
+        }
+        return `:${m}`;
+      });
+
+    return routePath?.length > 0 ? `/${routePath}` : "/";
+  }
+
+  toRoute(src) {
+    let path = this.toPath(src);
+    const [_, exports] = analyzeModule(src);
+    if (exports.find(exp => HTTP_METHODS.includes(exp.n))) {
       return {
         type: "api",
         ...createHTTPHandlers(src, exports),

package/config/index.d.ts

@@ -9,8 +9,9 @@ type SolidStartInlineConfig = Omit<InlineConfig, "router"> & {
          * true: streaming mode
          * false: csr only
          * async: ssr is in async mode
+         * sync: ssr is in sync mode
          */
-        ssr?: boolean | "async",
+        ssr?: boolean | "async" | "sync",
         solid?: Options,
         extensions?: string[],
         server?: AppOptions['server'],

package/config/index.js

@@ -8,7 +8,7 @@ import { createApp, resolve } from "vinxi";
 import { normalize } from "vinxi/lib/path";
 import { config } from "vinxi/plugins/config";
 import solid from "vite-plugin-solid";
-import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
+import { SolidStartAPIFileRouter, SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
 import { serverComponents } from "./server-components.js";
 
 const DEFAULT_EXTENSIONS = ["js", "jsx", "ts", "tsx"];
@@ -18,7 +18,7 @@ function solidStartClientFsRouter(config) {
     new SolidStartClientFileRouter(
       {
         dir: resolve.absolute(config.dir, router.root),
-        extensions: config.extensions ?? ["js", "jsx", "ts", "tsx"]
+        extensions: config.extensions ?? DEFAULT_EXTENSIONS
       },
       router,
       app
@@ -30,7 +30,19 @@ function solidStartServerFsRouter(config) {
     new SolidStartServerFileRouter(
       {
         dir: resolve.absolute(config.dir, router.root),
-        extensions: config.extensions ?? ["js", "jsx", "ts", "tsx"]
+        extensions: config.extensions ?? DEFAULT_EXTENSIONS
+      },
+      router,
+      app
+    );
+}
+
+function solidStartAPIFileRouter(config) {
+  return (router, app) =>
+    new SolidStartAPIFileRouter(
+      {
+        dir: resolve.absolute(config.dir, router.root),
+        extensions: config.extensions ?? DEFAULT_EXTENSIONS
       },
       router,
       app
@@ -44,7 +56,12 @@ export function defineConfig(baseConfig = {}) {
     appRoot: "./src",
     ssr: true,
     islands: false,
-    solid: {}
+    solid: {},
+    server: {
+      experimental: {
+        asyncContext: true
+      }
+    }
   });
   let server = start.server;
   if (!start.ssr) {
@@ -65,14 +82,25 @@ export function defineConfig(baseConfig = {}) {
     routers: [
       {
         name: "public",
-        mode: "static",
+        type: "static",
         dir: "./public",
         base: "/"
       },
-
+      {
+        name: "api",
+        type: "http",
+        target: "server",
+        base: "/",
+        handler: normalize(fileURLToPath(new URL("./api-handler.ts", import.meta.url))),
+        routes: solidStartAPIFileRouter({ dir: `${start.appRoot}/routes` }),
+        middleware: start.middleware
+      },
       {
         name: "ssr",
-        mode: "handler",
+        type: "http",
+        link: {
+          client: start.islands ? undefined : "client"
+        },
         handler: `${start.appRoot}/entry-server${entryExtension}`,
         middleware: start.middleware,
         routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
@@ -85,15 +113,15 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
 
           serverTransform({
-            runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url)))
+            runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.ts", import.meta.url)))
           }),
           start.islands ? serverComponents.server() : null,
           solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
@@ -122,7 +150,7 @@ export function defineConfig(baseConfig = {}) {
       },
       {
         name: "client",
-        mode: "build",
+        type: "client",
         handler: `${start.appRoot}/entry-client${entryExtension}`,
         ...(start.islands
           ? {}
@@ -138,14 +166,14 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
           serverFunctions.client({
-            runtime: normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)))
+            runtime: normalize(fileURLToPath(new URL("./server-runtime.ts", import.meta.url)))
           }),
           start.islands ? serverComponents.client() : null,
           solid({ ...start.solid, ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
@@ -179,8 +207,8 @@ export function defineConfig(baseConfig = {}) {
         base: "/_build"
       },
       serverFunctions.router({
-        handler: normalize(fileURLToPath(new URL("./server-handler.js", import.meta.url))),
-        runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url))),
+        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 }),
         plugins: async () => [
           config("user", {
@@ -189,10 +217,10 @@ export function defineConfig(baseConfig = {}) {
               ...(userConfig.optimizeDeps || {}),
               include: [
                 ...(userConfig.optimizeDeps?.include || []),
-                '@solidjs/start > source-map-js',
-                '@solidjs/start > error-stack-parser',
-              ],
-            },
+                "@solidjs/start > source-map-js",
+                "@solidjs/start > error-stack-parser"
+              ]
+            }
           }),
           ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
 

package/config/{server-fns-runtime.jsx → server-fns-runtime.ts}

@@ -1,14 +1,17 @@
 import { getRequestEvent } from "solid-js/web";
+//@ts-ignore
 import { provideRequestEvent } from "solid-js/web/storage";
-import { cloneEvent } from "../server/middleware";
+import { cloneEvent } from "../server/fetchEvent";
 
 export function createServerReference(fn, id, name) {
+  if (typeof fn !== "function") throw new Error("Export from a 'use server' module must be a function");
   const baseURL = import.meta.env.SERVER_BASE_URL;
   return new Proxy(fn, {
     get(target, prop, receiver) {
       if (prop === "url") {
         return `${baseURL}/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
       }
+      if (prop === "GET") return receiver;
     },
     apply(target, thisArg, args) {
       const ogEvt = getRequestEvent();

package/config/{server-handler.js → server-handler.ts}

@@ -16,16 +16,13 @@ import { sharedConfig } from "solid-js";
 /* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import invariant from "vinxi/lib/invariant";
-import {
-  eventHandler,
-  setHeader
-} from "vinxi/server";
-import { getFetchEvent } from "../server/middleware";
+import { eventHandler, setHeader } from "vinxi/server";
+import { getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
 
 function createChunk(data) {
   const bytes = data.length;
   const baseHex = bytes.toString(16);
-  const totalHex = '00000000'.substring(0, 8 - baseHex.length) + baseHex; // 32-bit
+  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex; // 32-bit
   return new TextEncoder().encode(`;0x${totalHex};${data}`);
 }
 
@@ -47,7 +44,9 @@ function serializeToStream(id, value) {
           URLPlugin
         ],
         onSerialize(data, initial) {
-          controller.enqueue(createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data));
+          controller.enqueue(
+            createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data)
+          );
         },
         onDone() {
           controller.close();
@@ -61,7 +60,6 @@ function serializeToStream(id, value) {
 }
 
 async function handleServerFunction(h3Event) {
-  invariant(h3Event.method === "POST", `Invalid method ${h3Event.method}. Expected POST.`);
   const event = getFetchEvent(h3Event);
   const request = event.request;
 
@@ -84,39 +82,67 @@ async function handleServerFunction(h3Event) {
   let parsed = [];
 
   // grab bound arguments from url when no JS
-  if (!instance) {
+  if (!instance || h3Event.method === "GET") {
     const args = url.searchParams.get("args");
     if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
   }
-  const contentType = request.headers.get("content-type");
-  if (
-    contentType.startsWith("multipart/form-data") ||
-    contentType.startsWith("application/x-www-form-urlencoded")
-  ) {
-    parsed.push(await request.formData());
-  } else {
-    parsed = fromJSON(await request.json(), {
-      plugins: [
-        CustomEventPlugin,
-        DOMExceptionPlugin,
-        EventPlugin,
-        FormDataPlugin,
-        HeadersPlugin,
-        ReadableStreamPlugin,
-        RequestPlugin,
-        ResponsePlugin,
-        URLSearchParamsPlugin,
-        URLPlugin
-      ]
-    });
+  if (h3Event.method === "POST") {
+    const contentType = request.headers.get("content-type");
+    if (
+      contentType.startsWith("multipart/form-data") ||
+      contentType.startsWith("application/x-www-form-urlencoded")
+    ) {
+      // 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 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 })
+      // what should work when #1721 is fixed
+      // just use request.json() here
+      parsed = fromJSON(await tmpReq.json(), {
+        plugins: [
+          CustomEventPlugin,
+          DOMExceptionPlugin,
+          EventPlugin,
+          FormDataPlugin,
+          HeadersPlugin,
+          ReadableStreamPlugin,
+          RequestPlugin,
+          ResponsePlugin,
+          URLSearchParamsPlugin,
+          URLPlugin
+        ]
+      });
+    }
   }
   try {
-    const result = await provideRequestEvent(event, () => {
+    let result = await provideRequestEvent(event, () => {
       /* @ts-ignore */
       sharedConfig.context = { event };
       return action(...parsed);
     });
 
+    // handle responses
+    if (result instanceof Response) {
+      if (result.status === 302) {
+        return new Response(null, {
+          status: instance ? 204 : 302,
+          headers: {
+            Location: result.headers.get("Location")
+          }
+        });
+      }
+      // 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;
+    }
+
     // handle no JS success case
     if (!instance) {
       const isError = result instanceof Error;
@@ -142,13 +168,20 @@ async function handleServerFunction(h3Event) {
     setHeader(h3Event, "content-type", "text/javascript");
     return serializeToStream(instance, result);
   } catch (x) {
-    if (x instanceof Response && x.status === 302) {
-      return new Response(null, {
-        status: instance ? 204 : 302,
-        headers: {
-          Location: x.headers.get("Location")
-        }
-      });
+    if (x instanceof Response) {
+      if (x.status === 302) {
+        return new Response(null, {
+          status: instance ? 204 : 302,
+          headers: {
+            Location: x.headers.get("Location")
+          }
+        });
+      }
+      // 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;
     }
     return x;
   }

package/config/{server-runtime.jsx → server-runtime.ts}

@@ -9,14 +9,17 @@ import {
   RequestPlugin,
   ResponsePlugin,
   URLPlugin,
-  URLSearchParamsPlugin,
-} from 'seroval-plugins/web';
+  URLSearchParamsPlugin
+} from "seroval-plugins/web";
 import { createIslandReference } from "../server/islands";
 
 class SerovalChunkReader {
+  reader: ReadableStreamDefaultReader<Uint8Array>;
+  buffer: string;
+  done: boolean;
   constructor(stream) {
     this.reader = stream.getReader();
-    this.buffer = '';
+    this.buffer = "";
     this.done = false;
   }
 
@@ -33,12 +36,12 @@ class SerovalChunkReader {
 
   async next() {
     // Check if the buffer is empty
-    if (this.buffer === '') {
+    if (this.buffer === "") {
       // if we are already done...
       if (this.done) {
         return {
           done: true,
-          value: undefined,
+          value: undefined
         };
       }
       // Otherwise, read a new chunk
@@ -55,7 +58,7 @@ class SerovalChunkReader {
       // If it's not enough, and the reader is done
       // then the chunk is invalid.
       if (this.done) {
-        throw new Error('Malformed server function stream.')
+        throw new Error("Malformed server function stream.");
       }
       // Otherwise, we read more chunks
       await this.readChunk();
@@ -67,7 +70,7 @@ class SerovalChunkReader {
     // Deserialize the chunk
     return {
       done: false,
-      value: deserialize(partial),
+      value: deserialize(partial)
     };
   }
 
@@ -92,6 +95,7 @@ async function deserializeStream(id, response) {
   if (!result.done) {
     reader.drain().then(
       () => {
+        // @ts-ignore
         delete $R[id];
       },
       () => {
@@ -105,7 +109,7 @@ async function deserializeStream(id, response) {
 
 let INSTANCE = 0;
 
-function createRequest(base, id, instance, body, contentType) {
+function createRequest(base: string, id: string, instance: string, body: any, contentType?: string) {
   return fetch(base, {
     method: "POST",
     headers: {
@@ -117,31 +121,47 @@ function createRequest(base, id, instance, body, contentType) {
   });
 }
 
-async function fetchServerFunction(base, id, args) {
+async function fetchServerFunction(base, id, method, args) {
   const instance = `server-fn:${INSTANCE++}`;
-  const response = await (args.length === 1 && args[0] instanceof FormData
+  const response = await (method === "GET"
+    ? fetch(base + (args.length ? `&args=${JSON.stringify(args)}` : ""), {
+        headers: {
+          "x-server-instance": instance
+        }
+      })
+    : args.length === 1 && args[0] instanceof FormData
     ? createRequest(base, id, instance, args[0])
-    : createRequest(base, id, instance, JSON.stringify(await Promise.resolve(toJSONAsync(args, {
-      plugins: [
-        CustomEventPlugin,
-        DOMExceptionPlugin,
-        EventPlugin,
-        FormDataPlugin,
-        HeadersPlugin,
-        ReadableStreamPlugin,
-        RequestPlugin,
-        ResponsePlugin,
-        URLSearchParamsPlugin,
-        URLPlugin,
-      ],
-    }))), "application/json"));
+    : createRequest(
+        base,
+        id,
+        instance,
+        JSON.stringify(
+          await Promise.resolve(
+            toJSONAsync(args, {
+              plugins: [
+                CustomEventPlugin,
+                DOMExceptionPlugin,
+                EventPlugin,
+                FormDataPlugin,
+                HeadersPlugin,
+                ReadableStreamPlugin,
+                RequestPlugin,
+                ResponsePlugin,
+                URLSearchParamsPlugin,
+                URLPlugin
+              ]
+            })
+          )
+        ),
+        "application/json"
+      ));
 
   if (response.headers.get("Location")) throw response;
   if (response.headers.get("X-Revalidate")) {
-    /* ts-ignore-next-line */
+    /* @ts-ignore-next-line */
     response.customBody = () => {
       return deserializeStream(instance, response);
-    }
+    };
     throw response;
   }
   const contentType = response.headers.get("Content-Type");
@@ -166,9 +186,12 @@ export function createServerReference(fn, id, name) {
       if (prop === "url") {
         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);
+      }
     },
     apply(target, thisArg, args) {
-      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, args);
+      return fetchServerFunction(`${baseURL}/_server`, `${id}#${name}`, "POST", args);
     }
   });
 }