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

package/client/StartClient.tsx

@@ -1,5 +1,6 @@
 // @ts-ignore
 import App from "#start/app";
+import { ErrorBoundary } from "../shared/ErrorBoundary";
 import "./mount";
 
 function Dummy(props) {
@@ -10,7 +11,9 @@ export function StartClient() {
   return (
     <Dummy>
       <Dummy>
-        <App />
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>
       </Dummy>
     </Dummy>
   );

package/config/index.js

@@ -1,4 +1,5 @@
 import { serverFunctions } from "@vinxi/server-functions/plugin";
+import { serverTransform } from "@vinxi/server-functions/server";
 import defu from "defu";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -36,14 +37,15 @@ function solidStartServerFsRouter(config) {
 }
 
 export function defineConfig(baseConfig = {}) {
-  let { plugins = [], start = {}, ...userConfig } = baseConfig;
+  let { plugins = [], ssr = true, start = {}, ...userConfig } = baseConfig;
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   start = defu(start, {
     appRoot: "./src",
-    ssr: true,
+    ssr,
     islands: false,
     serverPlugins: []
   });
+
   return createApp({
     server: {
       compressPublicAssets: {
@@ -63,14 +65,15 @@ export function defineConfig(baseConfig = {}) {
         mode: "handler",
         handler: `${start.appRoot}/entry-server.tsx`,
         middleware: start.middleware,
-        ...(start.ssr
-          ? { routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }) }
-          : {}),
+        routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         extensions,
         target: "server",
         plugins: () => [
           config("user", userConfig),
           ...plugins,
+          serverTransform({
+            runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url)))
+          }),
           start.islands ? serverComponents.server() : null,
           solid({ ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
@@ -138,16 +141,10 @@ export function defineConfig(baseConfig = {}) {
         ],
         base: "/_build"
       },
-      // {
-      //   name: "server",
-      //   mode: "handler",
-      //   base: "/_server",
-      //   handler: serverFunctions.handler,
-      //   target: "server",
-      //   ...(overrides ?? {}),
-      //   plugins: () => [serverserver(), ...(overrides?.plugins?.() ?? [])],
-      // },
       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))),
+        // routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         plugins: () => [
           config("user", userConfig),
           ...plugins,

package/config/server-fns-runtime.jsx

@@ -0,0 +1,12 @@
+export function createServerReference(fn, id, name) {
+  return new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "url") {
+        return `/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
+      }
+    },
+    apply(target, thisArg, args) {
+      return fn.apply(thisArg, args);
+    }
+  });
+}

package/config/server-handler.js

@@ -0,0 +1,112 @@
+/// <reference types="vinxi/types/server" />
+import { crossSerializeStream, fromJSON } from "seroval";
+import { provideRequestEvent } from "solid-js/web/storage";
+import invariant from "vinxi/lib/invariant";
+import {
+  eventHandler,
+  getHeader,
+  getRequestURL,
+  readBody,
+  readFormData,
+  setHeader
+} from "vinxi/server";
+import { getFetchEvent } from "../server/middleware";
+
+function serializeToStream(id, value) {
+  return new ReadableStream({
+    start(controller) {
+      crossSerializeStream(value, {
+        scopeId: id,
+        onSerialize(data, initial) {
+          const result = initial ? `($R["${id}"]=[],${data})` : data;
+          controller.enqueue(new TextEncoder().encode(`${result};\n`));
+        },
+        onDone() {
+          // controller.enqueue(`delete $R["${id}"];\n`);
+          controller.close();
+        },
+        onError(error) {
+          // controller.enqueue(`delete $R["${id}"];\n`);
+          controller.error(error);
+        }
+      });
+    }
+  });
+}
+
+async function handleServerFunction(event) {
+  invariant(event.method === "POST", `Invalid method ${event.method}. Expected POST.`);
+
+  const serverReference = getHeader(event, "x-server-id");
+  const instance = getHeader(event, "x-server-instance");
+  const url = getRequestURL(event);
+  let filepath, name;
+  if (serverReference) {
+    invariant(typeof serverReference === "string", "Invalid server function");
+    [filepath, name] = serverReference.split("#");
+  } else {
+    filepath = url.searchParams.get("id");
+    name = url.searchParams.get("name");
+    if (!filepath || !name) throw new Error("Invalid request");
+  }
+
+  const action = (
+    await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[filepath].import()
+  )[name];
+  let parsed;
+  const contentType = getHeader(event, "content-type");
+  if (
+    contentType.startsWith("multipart/form-data") ||
+    contentType.startsWith("application/x-www-form-urlencoded")
+  ) {
+    parsed = [await readFormData(event)];
+  } else {
+    parsed = fromJSON(await readBody(event));
+  }
+  try {
+    const result = await provideRequestEvent(getFetchEvent(event), () => action(...parsed));
+
+    // handle no JS success case
+    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
+        }
+      });
+    }
+
+    setHeader(event, "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")
+        }
+      });
+    }
+    return new Response(serializeToStream(instance, x), {
+      status: 500,
+      headers: {
+        "Content-Type": "text/javascript"
+      }
+    });
+  }
+}
+
+export default eventHandler(handleServerFunction);

package/config/server-runtime.jsx

@@ -1,25 +1,89 @@
+import { deserialize, toJSONAsync } from "seroval";
 import { createIslandReference } from "../server/islands";
 
-async function fetchServerAction(base, id, args) {
-  console.log("fetching serevr action");
-  const response = await fetch(base, {
+async function deserializeStream(id, response) {
+  if (!response.body) {
+    throw new Error("missing body");
+  }
+  const reader = response.body.getReader();
+
+  async function pop() {
+    const result = await reader.read();
+    if (!result.done) {
+      const serialized = new TextDecoder().decode(result.value);
+      const splits = serialized.split("\n");
+      for (const split of splits) {
+        if (split !== "") {
+          deserialize(split);
+        }
+      }
+      await pop();
+    }
+  }
+
+  const result = await reader.read();
+  if (result.done) {
+    throw new Error("Unexpected end of body");
+  }
+  const serialized = new TextDecoder().decode(result.value);
+  let pending = true;
+  let revived;
+  const splits = serialized.split("\n");
+  for (const split of splits) {
+    if (split !== "") {
+      const current = deserialize(split);
+      if (pending) {
+        revived = current;
+        pending = false;
+      }
+    }
+  }
+
+  pop().then(
+    () => {
+      delete self.$R[id];
+    },
+    () => {
+      // no-op
+    }
+  );
+
+  return revived;
+}
+
+let INSTANCE = 0;
+
+function createRequest(base, id, instance, body, contentType) {
+  return fetch(base, {
     method: "POST",
     headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      "server-action": id
+      "x-server-id": id,
+      "x-server-instance": instance,
+      ...(contentType ? { "Content-Type": contentType } : {})
     },
-    body: JSON.stringify(args)
+    body
   });
+}
 
-  const json = await response.json();
+async function fetchServerFunction(base, id, args) {
+  const instance = `server-fn:${INSTANCE++}`;
+  const response = await (args.length === 1 && args[0] instanceof FormData
+    ? createRequest(base, id, instance, args[0])
+    : createRequest(base, id, instance, JSON.stringify(await toJSONAsync(args)), "application/json"));
 
-  if (response.status === 200) {
-    return json;
-  } else {
-    console.log(json);
-    throw { message: json.error };
+  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;
+  }
+  const result = deserializeStream(instance, response);
+  if (response.ok) {
+    return result;
   }
+  throw result;
 }
 
 export function createServerReference(fn, id, name) {
@@ -30,7 +94,7 @@ export function createServerReference(fn, id, name) {
       }
     },
     apply(target, thisArg, args) {
-      return fetchServerAction("/_server", `${id}#${name}`, args);
+      return fetchServerFunction("/_server", `${id}#${name}`, args);
     }
   });
 }

package/env.d.ts

@@ -0,0 +1,23 @@
+// This file is an augmentation to the built-in ImportMeta interface
+// Thus cannot contain any top-level imports
+// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
+
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+interface ImportMetaEnv extends Record<`VITE_${string}`, any>, SolidStartMetaEnv {
+  BASE_URL: string;
+  MODE: string;
+  DEV: boolean;
+  PROD: boolean;
+  SSR: boolean;
+}
+
+interface SolidStartMetaEnv {
+  START_ISLANDS_ROUTER: string;
+  START_INDEX_HTML: string;
+  START_ENTRY_CLIENT: string;
+  START_SSR: string;
+  START_ISLANDS: string;
+  START_ENTRY_SERVER: string;
+  DEBUG: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.0-alpha.0",
+  "version": "0.4.0-alpha.1",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -38,14 +38,15 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.4",
-    "vinxi": "0.0.47"
+    "solid-js": "^1.8.7",
+    "vinxi": "0.0.48"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "0.0.39",
-    "@vinxi/server-functions": "0.0.39",
-    "@vinxi/server-components": "0.0.39",
+    "@vinxi/plugin-directives": "0.0.44",
+    "@vinxi/server-components": "0.0.44",
+    "@vinxi/server-functions": "0.0.45",
     "defu": "^6.1.2",
+    "seroval": "^0.14.1",
     "vite-plugin-inspect": "^0.7.33",
     "vite-plugin-solid": "^2.7.0"
   }

package/server/StartServer.tsx

@@ -1,14 +1,15 @@
 // @ts-ignore
 import App from "#start/app";
-import { Hydration, HydrationScript, NoHydration, ssr } from "solid-js/web";
+import type { Component } from "solid-js";
+import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
+import type { DocumentComponentProps } from "./types";
 
 const docType = ssr("<!DOCTYPE html>");
 
-export function StartServer(props) {
-  const context = props.context;
-  const parsed = new URL(context.request.url);
-  const path = parsed.pathname + parsed.search;
+export function StartServer(props: { document: Component<DocumentComponentProps> }) {
+  const context = getRequestEvent() as any;
   return (
     <NoHydration>
       {docType as unknown as any}
@@ -31,10 +32,14 @@ export function StartServer(props) {
       >
         {!import.meta.env.START_ISLANDS ? (
           <Hydration>
-            <App />
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
           </Hydration>
         ) : (
-          <App />
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>
         )}
       </props.document>
     </NoHydration>

package/server/handler.tsx

@@ -1,10 +1,17 @@
 import { renderToStream } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, EventHandlerObject, EventHandlerRequest, H3Event } from "vinxi/server";
-import { createRoutes } from "../shared/FileRoutes";
+import {
+  eventHandler,
+  EventHandlerObject,
+  EventHandlerRequest,
+  H3Event,
+  setHeader,
+  setResponseStatus
+} from "vinxi/server";
 import { apiRoutes } from "../shared/routes";
 import { getFetchEvent } from "./middleware";
-import { FetchEvent, FETCH_EVENT, PageEvent } from "./types";
+import { createPageEvent } from "./page-event";
+import { FetchEvent, PageEvent } from "./types";
 
 export function createHandler(
   fn: (context: PageEvent) => unknown,
@@ -12,6 +19,8 @@ export function createHandler(
     nonce?: string;
     renderId?: string;
     timeoutMs?: number;
+    onCompleteAll?: (options: { write: (v: any) => void }) => void;
+    onCompleteShell?: (options: { write: (v: any) => void }) => void;
     createPageEvent?: (event: FetchEvent) => Promise<PageEvent>;
     onRequest?: EventHandlerObject["onRequest"];
     onBeforeResponse?: EventHandlerObject["onBeforeResponse"];
@@ -38,9 +47,24 @@ export function createHandler(
 
         // render stream
         const context = await createPageEvent(event);
-        const stream = renderToStream(() => fn(context), options);
-        if (context.response && context.response.url) {
-          return event.redirect(context.response.url);
+        let cloned = { ...options };
+        if (cloned.onCompleteAll) {
+          const og = cloned.onCompleteAll;
+          cloned.onCompleteAll = options => {
+            handleStreamCompleteRedirect(context)(options);
+            og(options);
+          };
+        } else cloned.onCompleteAll = handleStreamCompleteRedirect(context);
+        if (cloned.onCompleteShell) {
+          const og = cloned.onCompleteShell;
+          cloned.onCompleteShell = options => {
+            handleShellCompleteRedirect(context, e)();
+            og(options);
+          };
+        } 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 { pipeTo: stream.pipeTo };
       });
@@ -48,25 +72,18 @@ export function createHandler(
   });
 }
 
-export async function createPageEvent(ctx: FetchEvent) {
-  const clientManifest = import.meta.env.MANIFEST["client"];
-  const serverManifest = import.meta.env.MANIFEST["ssr"];
-  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, {
-    manifest: await clientManifest.json(),
-    assets: [
-      ...(await clientManifest.inputs[clientManifest.handler].assets()),
-      ...(import.meta.env.START_ISLANDS
-        ? await serverManifest.inputs[serverManifest.handler].assets()
-        : [])
-    ],
-    routes: createRoutes(),
-    prevUrl: prevPath || "",
-    mutation: mutation,
-    $type: FETCH_EVENT,
-    $islands: new Set<string>()
-  });
+function handleShellCompleteRedirect(context: PageEvent, e: H3Event<EventHandlerRequest>) {
+  return () => {
+    if (context.response && context.response.headers.get("Location")) {
+      setResponseStatus(e, 302);
+      setHeader(e, "Location", context.response.headers.get("Location"));
+    }
+  }
+}
 
-  return pageEvent;
+function handleStreamCompleteRedirect(context: PageEvent) {
+  return ({ write }: { write: (html: string) => void }) => {
+    const to = context.response && context.response.headers.get("Location");
+    to && write(`<script>window.location="${to}"</script>`);
+  };
 }

package/server/index.tsx

@@ -1,4 +1,13 @@
 export { StartServer } from "./StartServer";
-export { createHandler } from "./handler";
 export * from "./middleware";
 export type { DocumentComponentProps } from "./types";
+import { createPageEvent } from "./page-event";
+import { createHandler as createBaseHandler } from "./handler";
+import type { PageEvent } from "./types";
+
+export function createHandler(
+  fn: (context: PageEvent) => unknown,
+  options: Parameters<typeof createBaseHandler>[1] = {}
+) {
+  return createBaseHandler(fn, { ...options, createPageEvent });
+}

package/server/middleware.ts

@@ -52,28 +52,11 @@ export function getFetchEvent(h3Event: H3Event): FetchEvent {
   return h3Event[fetchEventSymbol];
 }
 
-export type Middleware = (input: MiddlewareInput) => MiddlewareFn;
-/** Input parameters for to an Exchange factory function. */
-
-export interface MiddlewareInput {
-  forward: MiddlewareFn;
-}
 /** 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 */
 
-export const composeMiddleware =
-  (exchanges: Middleware[]) =>
-  ({ forward }: MiddlewareInput) =>
-    exchanges.reduceRight(
-      (forward, exchange) =>
-        exchange({
-          forward
-        }),
-      forward
-    );
-
 type RequestMiddleware = (event: FetchEvent) => Response | Promise<Response> | void | Promise<void>;
 
 type ResponseMiddleware = (

package/server/page-event.tsx

@@ -0,0 +1,26 @@
+import { createRoutes } from "../shared/FileRoutes";
+import { FetchEvent, PageEvent } from "./types";
+
+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");
+  // 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, {
+    manifest: await clientManifest.json(),
+    assets: [
+      ...(await clientManifest.inputs[clientManifest.handler].assets()),
+      ...(import.meta.env.START_ISLANDS
+        ? await serverManifest.inputs[serverManifest.handler].assets()
+        : [])
+    ],
+    routes: createRoutes(),
+    // prevUrl: prevPath || "",
+    // mutation: mutation,
+    // $type: FETCH_EVENT,
+    $islands: new Set<string>()
+  });
+
+  return pageEvent;
+}

package/server/spa/StartServer.tsx

@@ -1,11 +1,11 @@
 // @ts-ignore
-import { NoHydration, ssr } from "solid-js/web";
+import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
 import { renderAsset } from "../renderAsset";
 
 const docType = ssr("<!DOCTYPE html>");
 
 export function StartServer(props) {
-  const context = props.context;
+  const context = getRequestEvent() as any;
   return (
     <NoHydration>
       {docType as unknown as any}

package/server/types.ts

@@ -1,10 +1,10 @@
 import { JSX } from "solid-js";
 
-export const FETCH_EVENT = "$FETCH";
+// export const FETCH_EVENT = "$FETCH";
 
 export type DocumentComponentProps = {
-  assets: any;
-  scripts: any;
+  assets: JSX.Element;
+  scripts: JSX.Element;
   children: JSX.Element;
 }
 
@@ -15,25 +15,6 @@ export type ContextMatches = {
   params: unknown;
 };
 
-type TagDescription = {
-  tag: string;
-  props: Record<string, unknown>;
-};
-
-type RouterContext = {
-  // router matches;
-  matches: ContextMatches[][];
-  // redirected url
-  url: string;
-
-  // server route fragments
-  replaceOutletId: string;
-  newOutletId: string;
-  partial: boolean;
-  nextRoute: any;
-  prevRoute: any;
-};
-
 export interface FetchEvent {
   request: Request;
   clientAddress: string;
@@ -50,9 +31,9 @@ export interface PageEvent extends FetchEvent {
   manifest: any;
   assets: any;
   routes: any[];
-  prevUrl: string | null;
-  $type: typeof FETCH_EVENT;
+  // prevUrl: string | null;
+  // $type: typeof FETCH_EVENT;
   $islands: Set<string>;
-  mutation: boolean;
+  // mutation: boolean;
   response?: Response;
 }

package/shared/FileRoutes.tsx

@@ -1,3 +1,4 @@
+/* @refresh skip */
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 

package/shared/index.tsx

@@ -1,5 +1,4 @@
 export { default as clientOnly } from "./clientOnly";
-export { ErrorBoundary as DefaultErrorBoundary } from "./ErrorBoundary";
 export { FileRoutes } from "./FileRoutes";
 export { HttpHeader } from "./HttpHeader";
 export { HttpStatusCode } from "./HttpStatusCode";

package/shared/routes.ts

@@ -1,4 +1,10 @@
-import fileRoutes, { Route } from "vinxi/routes";
+import fileRoutes, { RouteModule } from "vinxi/routes";
+
+interface Route {
+  path: string;
+  type: "api" | "page";
+  children?: Route[];
+}
 
 declare module "vinxi/routes" {
   export interface Register {
@@ -10,7 +16,7 @@ declare module "vinxi/routes" {
   }
 }
 
-const defineRoutes = (fileRoutes: Route[]) => {
+const defineRoutes = (fileRoutes: RouteModule[]) => {
   function processRoute(routes: Route[], route: Route, id: string, full: string) {
     const parentRoute = Object.values(routes).find(o => {
       // if (o.id.endsWith("/index")) {