@solidjs/start 0.4.0-alpha.1 → 0.4.0-alpha.2

package/README.md

@@ -0,0 +1,12 @@
+# Solid Start
+
+This is the SolidStart framework and CLI.
+
+The quickest way to get started:
+
+```bash
+npm init solid@latest my-app
+cd my-app
+npm install
+npm run dev
+```

package/config/index.js

@@ -37,20 +37,24 @@ function solidStartServerFsRouter(config) {
 }
 
 export function defineConfig(baseConfig = {}) {
-  let { plugins = [], ssr = true, start = {}, ...userConfig } = baseConfig;
+  let { plugins = [], start = {}, ...userConfig } = baseConfig;
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   start = defu(start, {
     appRoot: "./src",
-    ssr,
+    ssr: true,
     islands: false,
-    serverPlugins: []
   });
+  let server = start.server;
+  if (!start.ssr) {
+    server = { ...server, prerender: { routes: ["/"] }  };
+  }
 
   return createApp({
     server: {
       compressPublicAssets: {
         brotli: true
-      }
+      },
+      ...server
     },
     routers: [
       {

package/config/server-fns-runtime.jsx

@@ -1,3 +1,7 @@
+import { getRequestEvent } from "solid-js/web";
+import { provideRequestEvent } from "solid-js/web/storage";
+import { cloneEvent } from "../server";
+
 export function createServerReference(fn, id, name) {
   return new Proxy(fn, {
     get(target, prop, receiver) {
@@ -6,7 +10,11 @@ export function createServerReference(fn, id, name) {
       }
     },
     apply(target, thisArg, args) {
-      return fn.apply(thisArg, args);
+      const evt = cloneEvent(getRequestEvent());
+      evt.serverOnly = true;
+      return provideRequestEvent(evt, () => {
+        return fn.apply(thisArg, args);
+      });
     }
   });
 }

package/config/server-handler.js

@@ -53,13 +53,19 @@ async function handleServerFunction(event) {
   const action = (
     await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
   )[name];
-  let parsed;
+  let parsed = [];
+
+  // grab bound arguments from url when no JS
+  if (!instance) {
+    const args = url.searchParams.get("args");
+    if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
+  }
   const contentType = getHeader(event, "content-type");
   if (
     contentType.startsWith("multipart/form-data") ||
     contentType.startsWith("application/x-www-form-urlencoded")
   ) {
-    parsed = [await readFormData(event)];
+    parsed.push(await readFormData(event));
   } else {
     parsed = fromJSON(await readBody(event));
   }
@@ -70,21 +76,16 @@ async function handleServerFunction(event) {
     if (!instance) {
       const isError = result instanceof Error;
       const refererUrl = new URL(getHeader(event, "referer"));
-      if (result !== undefined)
-        refererUrl.searchParams.set(
-          "form",
-          JSON.stringify({
-            url: url.pathname + url.search,
-            result: isError ? result.message : result,
-            error: isError,
-            entries: [...parsed[0].entries()]
-          })
-        );
-      else refererUrl.searchParams.delete("form");
       return new Response(null, {
         status: 302,
         headers: {
-          Location: refererUrl.pathname + refererUrl.search
+          Location: refererUrl.toString(),
+          ...(result ? { "Set-Cookie": `flash=${JSON.stringify({
+            url: url.pathname + encodeURIComponent(url.search),
+            result: isError ? result.message : result,
+            error: isError,
+            input: [...parsed.slice(0, -1), [...parsed[parsed.length-1].entries()]]
+          })}; Secure; HttpOnly;`} : {})
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.2",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -48,6 +48,9 @@
     "defu": "^6.1.2",
     "seroval": "^0.14.1",
     "vite-plugin-inspect": "^0.7.33",
-    "vite-plugin-solid": "^2.7.0"
+    "vite-plugin-solid": "^2.8.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --checkJs false --skipLibCheck"
   }
 }

package/server/handler.tsx

@@ -1,17 +1,20 @@
 import { renderToStream } from "solid-js/web";
+/* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import {
-  eventHandler,
   EventHandlerObject,
   EventHandlerRequest,
   H3Event,
+  HTTPMethod,
+  eventHandler,
+  sendRedirect,
   setHeader,
   setResponseStatus
 } from "vinxi/server";
-import { apiRoutes } from "../shared/routes";
+import { matchAPIRoute } from "../shared/routes";
 import { getFetchEvent } from "./middleware";
 import { createPageEvent } from "./page-event";
-import { FetchEvent, PageEvent } from "./types";
+import { APIEvent, FetchEvent, PageEvent } from "./types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -34,15 +37,12 @@ export function createHandler(
 
       return provideRequestEvent(event, async () => {
         // api
-        const match = apiRoutes.find(
-          route =>
-            route[`$${event.request.method}`] && new URL(event.request.url).pathname === route.path
-        );
+        const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method as HTTPMethod)
         if (match) {
-          const mod = await match[`$${event.request.method}`].import();
+          const mod = await match.handler.import();
           const fn = mod[event.request.method];
-          const result = await fn(event);
-          return result;
+          (event as APIEvent).params = match.params;
+          return await fn(event);
         }
 
         // render stream
@@ -64,7 +64,7 @@ export function createHandler(
         } else cloned.onCompleteShell = handleShellCompleteRedirect(context, e);
         const stream = renderToStream(() => fn(context), cloned);
         if (context.response && context.response.headers.get("Location")) {
-          return event.redirect(context.response.headers.get("Location"));
+          return sendRedirect(event, context.response.headers.get("Location"));
         }
         return { pipeTo: stream.pipeTo };
       });

package/server/index.tsx

@@ -1,8 +1,9 @@
+export * from "vinxi/server";
 export { StartServer } from "./StartServer";
 export * from "./middleware";
-export type { DocumentComponentProps } from "./types";
-import { createPageEvent } from "./page-event";
+export * from "./types";
 import { createHandler as createBaseHandler } from "./handler";
+import { createPageEvent } from "./page-event";
 import type { PageEvent } from "./types";
 
 export function createHandler(

package/server/middleware.ts

@@ -1,45 +1,37 @@
 import {
-  appendResponseHeader,
   defineMiddleware,
   EventHandlerRequest,
   getRequestIP,
-  getResponseHeader,
-  getResponseStatus,
   H3Event,
-  removeResponseHeader,
-  sendRedirect,
   sendWebResponse,
-  setResponseHeader,
-  setResponseStatus,
   toWebRequest
 } from "vinxi/server";
 import { FetchEvent } from "./types";
 
-export * from "vinxi/server";
-
 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<EventHandlerRequest>): FetchEvent {
-  return {
-    request: toWebRequest(event),
-    clientAddress: getRequestIP(event),
-    locals: {},
-    redirect: (url, status) => sendRedirect(event, url, status),
-    getResponseStatus: () => getResponseStatus(event),
-    setResponseStatus: (code, text) => setResponseStatus(event, code, text),
-    getResponseHeader: name => getResponseHeader(event, name),
-    setResponseHeader: (name, value) => setResponseHeader(event, name, value),
-    appendResponseHeader: (name, value) => appendResponseHeader(event, name, value),
-    removeResponseHeader: name => removeResponseHeader(event, name),
-    // @ts-ignore
-    [h3EventSymbol]: event
-  };
+  return new Proxy(
+    {
+      request: toWebRequest(event),
+      clientAddress: getRequestIP(event),
+      locals: {},
+      // @ts-ignore
+      [h3EventSymbol]: event
+    },
+    eventTraps
+  ) as unknown as FetchEvent;
 }
 
-export function getH3Event(fetchEvent: FetchEvent): H3Event<EventHandlerRequest> {
-  // @ts-ignore
-  return fetchEvent[h3EventSymbol];
+export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
+  return new Proxy({ ...fetchEvent[fetchEventSymbol] }, eventTraps);
 }
 
 export function getFetchEvent(h3Event: H3Event): FetchEvent {

package/server/page-event.tsx

@@ -1,10 +1,25 @@
+import { getCookie, setCookie, setResponseHeader } from "vinxi/server";
 import { createRoutes } from "../shared/FileRoutes";
 import { FetchEvent, PageEvent } from "./types";
 
+function initFromFlash(ctx: FetchEvent) {
+  const flash = getCookie(ctx, "flash");
+  if (!flash) return;
+  let param = JSON.parse(flash);
+  if (!param || !param.result) return [];
+  const input = [...param.input.slice(0, -1), new Map(param.input[param.input.length - 1])];
+  setCookie(ctx, "flash", "", { maxAge: 0 });
+  return {
+    url: param.url,
+    result: param.error ? new Error(param.result) : param.result,
+    input
+  };
+}
+
 export async function createPageEvent(ctx: FetchEvent) {
   const clientManifest = import.meta.env.MANIFEST["client"];
   const serverManifest = import.meta.env.MANIFEST["ssr"];
-  ctx.setResponseHeader("Content-Type", "text/html");
+  setResponseHeader(ctx, "Content-Type", "text/html");
   // 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, {
@@ -15,6 +30,7 @@ export async function createPageEvent(ctx: FetchEvent) {
         ? await serverManifest.inputs[serverManifest.handler].assets()
         : [])
     ],
+    initialSubmission: initFromFlash(ctx),
     routes: createRoutes(),
     // prevUrl: prevPath || "",
     // mutation: mutation,

package/server/spa/StartServer.tsx

@@ -14,6 +14,7 @@ export function StartServer(props) {
         scripts={
           <>
             <script innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`} />
+            <script>$R = [];</script>
             <script
               type="module"
               src={

package/server/spa/handler.tsx

@@ -1,5 +1,5 @@
 import { createHandler as createBaseHandler } from "../handler";
-import { FetchEvent, FETCH_EVENT, PageEvent } from "../types";
+import { FetchEvent, PageEvent } from "../types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -14,9 +14,9 @@ export async function createPageEvent(ctx: FetchEvent) {
     manifest: await clientManifest.json(),
     assets: [...(await clientManifest.inputs[clientManifest.handler].assets())],
     routes: [],
-    prevUrl: "",
-    mutation: false,
-    $type: FETCH_EVENT,
+    // prevUrl: "",
+    // mutation: false,
+    // $type: FETCH_EVENT,
     $islands: new Set<string>()
   });
 

package/server/types.ts

@@ -1,4 +1,5 @@
 import { JSX } from "solid-js";
+import { EventHandlerRequest, H3Event } from "vinxi/server";
 
 // export const FETCH_EVENT = "$FETCH";
 
@@ -15,17 +16,10 @@ export type ContextMatches = {
   params: unknown;
 };
 
-export interface FetchEvent {
+export interface FetchEvent extends H3Event<EventHandlerRequest> {
   request: Request;
   clientAddress: string;
   locals: Record<string, unknown>;
-  redirect(url: string, status?: number): void;
-  getResponseStatus(): number;
-  setResponseStatus(code: number, text?: string): void;
-  getResponseHeader(name: string): string | number | string[];
-  setResponseHeader(name: string, value: string): void;
-  appendResponseHeader(name: string, value: string): void;
-  removeResponseHeader(name: string): void;
 }
 export interface PageEvent extends FetchEvent {
   manifest: any;
@@ -37,3 +31,17 @@ export interface PageEvent extends FetchEvent {
   // mutation: boolean;
   response?: Response;
 }
+
+export interface APIEvent extends FetchEvent {
+  params: { [key: string]: string };
+}
+
+export interface APIHandler {
+  (event: APIEvent): Promise<any>;
+}
+
+declare module "solid-js/web" {
+  interface RequestEvent extends FetchEvent {
+    serverOnly?: boolean;
+  }
+}

package/shared/FileRoutes.tsx

@@ -2,6 +2,7 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 
+import { PageEvent } from "../server";
 import { pageRoutes as routeConfigs } from "./routes";
 
 export function createRoutes() {
@@ -25,5 +26,5 @@ export function createRoutes() {
 
 let routes;
 export const FileRoutes = () => {
-  return isServer ? getRequestEvent().routes : (routes || (routes = createRoutes()));
+  return isServer ? (getRequestEvent() as PageEvent).routes : (routes || (routes = createRoutes()));
 };

package/shared/HttpHeader.tsx

@@ -1,17 +1,18 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import { appendResponseHeader, getResponseHeader, removeResponseHeader, setResponseHeader } from "vinxi/server";
 
 export function HttpHeader(props: { name: string; value: string; append?: boolean }) {
   if (isServer) {
-    const pageContext = getRequestEvent();
+    const event = getRequestEvent();
     if (props.append) {
-      pageContext!.appendResponseHeader(props.name, props.value);
+      appendResponseHeader(event, props.name, props.value);
     } else {
-      pageContext!.setResponseHeader(props.name, props.value);
+      setResponseHeader(event, props.name, props.value);
     }
 
     onCleanup(() => {
-      const value = pageContext!.getResponseHeader(props.name);
+      const value = getResponseHeader(event, props.name);
 
       // Todo: review this logic still the same in H3
       // H3 supports arrays so its possible there is no need to split..
@@ -20,8 +21,8 @@ export function HttpHeader(props: { name: string; value: string; append?: boolea
         const values = value.split(", ");
         const index = values.indexOf(props.value);
         index !== -1 && values.splice(index, 1);
-        if (values.length) pageContext!.setResponseHeader(props.name, values.join(", "));
-        else pageContext!.removeResponseHeader(props.name);
+        if (values.length) setResponseHeader(event, props.name, values.join(", "));
+        else removeResponseHeader(event, props.name);
       }
     });
   }

package/shared/HttpStatusCode.tsx

@@ -1,12 +1,13 @@
 import { onCleanup } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
+import { setResponseStatus } from "vinxi/server";
 
 export function HttpStatusCode(props: { code: number, text?: string }) {
   if (isServer) {
-    const context = getRequestEvent();
-    context!.setResponseStatus(props.code, props.text);
+    const context = getRequestEvent()!;
+    setResponseStatus(context, props.code, props.text);
     onCleanup(() => {
-      context!.setResponseStatus(200);
+      setResponseStatus(context, 200);
     });
   }
   return null;

package/shared/routes.ts

@@ -1,4 +1,5 @@
-import fileRoutes, { RouteModule } from "vinxi/routes";
+import fileRoutes from "vinxi/routes";
+import { HTTPMethod } from "vinxi/server";
 
 interface Route {
   path: string;
@@ -6,6 +7,17 @@ interface Route {
   children?: Route[];
 }
 
+type MatchRoute = Route & {
+  score: number;
+  params: {
+    type: "*" | ":";
+    name: string;
+    index: number;
+  }[];
+  matchSegments: (string | null)[];
+  wildcard: boolean;
+};
+
 declare module "vinxi/routes" {
   export interface Register {
     route: {
@@ -16,7 +28,52 @@ declare module "vinxi/routes" {
   }
 }
 
-const defineRoutes = (fileRoutes: RouteModule[]) => {
+export const pageRoutes = defineRoutes((fileRoutes as unknown as Route[]).filter(o => o.type === "page"));
+export const apiRoutes = defineAPIRoutes((fileRoutes as unknown as Route[]).filter(o => o.type === "api"));
+
+export function matchAPIRoute(path: string, method: HTTPMethod) {
+  const segments = path.split("/").filter(Boolean);
+
+  routeLoop: for (const route of apiRoutes) {
+    const matchSegments = route.matchSegments;
+
+    if (
+      segments.length < matchSegments.length ||
+      (!route.wildcard && segments.length > matchSegments.length)
+    ) {
+      continue;
+    }
+
+    for (let index = 0; index < matchSegments.length; index++) {
+      const match = matchSegments[index];
+      if (!match) {
+        continue;
+      }
+
+      if (segments[index] !== match) {
+        continue routeLoop;
+      }
+    }
+
+    const handler = route[`$${method}`];
+    if (handler === "skip" || handler === undefined) {
+      return;
+    }
+
+    const params: Record<string, string> = {};
+    for (const { type, name, index } of route.params) {
+      if (type === ":") {
+        params[name] = segments[index];
+      } else {
+        params[name] = segments.slice(index).join("/");
+      }
+    }
+
+    return { handler, params };
+  }
+}
+
+function defineRoutes(fileRoutes: Route[]) {
   function processRoute(routes: Route[], route: Route, id: string, full: string) {
     const parentRoute = Object.values(routes).find(o => {
       // if (o.id.endsWith("/index")) {
@@ -46,5 +103,78 @@ const defineRoutes = (fileRoutes: RouteModule[]) => {
     }, []);
 };
 
-export const pageRoutes = defineRoutes(fileRoutes.filter(o => o.type === "page"));
-export const apiRoutes = fileRoutes.filter(o => o.type === "api");
+function defineAPIRoutes(routes: Route[]) {
+  return routes
+    .flatMap(route => {
+      const paths = expandOptionals(route.path);
+      return paths.map(path => ({ ...route, path }));
+    })
+    .map(routeToMatchRoute)
+    .sort((a, b) => b.score - a.score);
+}
+
+// This is copied from https://github.com/solidjs/solid-router/blob/main/src/utils.ts
+function expandOptionals(pattern: string): string[] {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match) return [pattern];
+
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes: string[] = [prefix, (prefix += match[1])];
+
+  // This section handles adjacent optional params. We don't actually want all permuations since
+  // that will lead to equivalent apiRwhich have the same number of params. For example
+  // `/:a?/:b?/:c`? only has the unique expansion: `/`, `/:a`, `/:a/:b`, `/:a/:b/:c` and we can
+  // discard `/:b`, `/:c`, `/:b/:c` by building them up in order and not recursing. This also helps
+  // ensure predictability where earlier params have precidence.
+  while ((match = /^(\/\:[^\/]+)\?/.exec(suffix))) {
+    prefixes.push((prefix += match[1]));
+    suffix = suffix.slice(match[0].length);
+  }
+
+  return expandOptionals(suffix).reduce<string[]>(
+    (results, expansion) => [...results, ...prefixes.map(p => p + expansion)],
+    []
+  );
+}
+
+function routeToMatchRoute(route: Route): MatchRoute {
+  const segments = route.path.split("/").filter(Boolean);
+
+  const params: { type: "*" | ":"; name: string; index: number }[] = [];
+  const matchSegments: (string | null)[] = [];
+  let score = 0;
+  let wildcard = false;
+
+  for (const [index, segment] of segments.entries()) {
+    if (segment[0] === ":") {
+      const name = segment.slice(1);
+      score += 3;
+      params.push({
+        type: ":",
+        name,
+        index
+      });
+      matchSegments.push(null);
+    } else if (segment[0] === "*") {
+      score -= 1;
+      params.push({
+        type: "*",
+        name: segment.slice(1),
+        index
+      });
+      wildcard = true;
+    } else {
+      score += 4;
+      matchSegments.push(segment);
+    }
+  }
+
+  return {
+    ...route,
+    score,
+    params,
+    matchSegments,
+    wildcard
+  };
+}