@solidjs/start 0.7.1 → 0.7.2

package/dist/shared/dev-overlay/index.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+export interface DevOverlayProps {
+    children?: JSX.Element;
+}
+export declare function DevOverlay(props: DevOverlayProps): JSX.Element;

package/dist/shared/dev-overlay/index.jsx

@@ -0,0 +1,37 @@
+// @refresh skip
+import { ErrorBoundary, Show, createEffect, createSignal, onCleanup, resetErrorBoundaries } from "solid-js";
+import { HttpStatusCode } from "../HttpStatusCode";
+import clientOnly from "../clientOnly";
+const DevOverlayDialog = /* #__PURE__ */ clientOnly(() => import("./DevOverlayDialog"));
+export function DevOverlay(props) {
+    const [errors, setErrors] = createSignal([]);
+    function resetError() {
+        setErrors([]);
+        resetErrorBoundaries();
+    }
+    function pushError(error) {
+        console.error(error);
+        setErrors(current => [error, ...current]);
+    }
+    createEffect(() => {
+        const onErrorEvent = (error) => {
+            pushError(error.error);
+        };
+        window.addEventListener("error", onErrorEvent);
+        onCleanup(() => {
+            window.removeEventListener("error", onErrorEvent);
+        });
+    });
+    return (<>
+      <ErrorBoundary fallback={error => {
+            pushError(error);
+            return <HttpStatusCode code={500}/>;
+        }}>
+        {props.children}
+      </ErrorBoundary>
+      <Show when={errors().length}>
+        <HttpStatusCode code={500}/>
+        <DevOverlayDialog errors={errors()} resetError={resetError}/>
+      </Show>
+    </>);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "author": "Ryan Carniato",
   "license": "MIT",
@@ -8,42 +8,38 @@
     "access": "public"
   },
   "files": [
-    "client",
     "config",
-    "middleware",
-    "router",
-    "server",
-    "shared",
-    "*.d.ts"
+    "dist",
+    "env.d.ts"
   ],
-  "types": "./shared/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./shared/index.ts",
+    ".": "./dist/index.jsx",
     "./config": "./config/index.js",
-    "./middleware": "./middleware/index.ts",
-    "./router": "./router/index.ts",
-    "./server": "./server/index.tsx",
-    "./server/spa": "./server/spa/index.tsx",
-    "./client": "./client/index.tsx",
-    "./client/islands": "./client/islands.ts",
-    "./client/spa": "./client/spa/index.tsx"
+    "./middleware": "./dist/middleware/index.js",
+    "./router": "./dist/router/index.jsx",
+    "./server": "./dist/server/index.jsx",
+    "./server/spa": "./dist/server/spa/index.jsx",
+    "./client": "./dist/client/index.jsx",
+    "./client/islands": "./dist/client/islands.jsx",
+    "./client/spa": "./dist/client/spa/index.jsx"
   },
   "typesVersions": {
     "*": {
       ".": [
-        "./shared/index.ts"
+        "./dist/index.d.ts"
       ],
       "middleware": [
-        "./middleware/index.ts"
+        "./dist/middleware/index.d.ts"
       ],
       "router": [
-        "./router/index.ts"
+        "./dist/router/index.d.ts"
       ],
       "server": [
-        "./server/index.tsx"
+        "./dist/server/index.d.ts"
       ],
       "client": [
-        "./client/index.tsx"
+        "./dist/client/index.d.ts"
       ]
     }
   },
@@ -57,6 +53,7 @@
     "@vinxi/server-functions": "^0.3.2",
     "defu": "^6.1.2",
     "error-stack-parser": "^2.1.4",
+    "glob": "^10.3.10",
     "html-to-image": "^1.11.11",
     "radix3": "^1.1.0",
     "seroval": "^1.0.2",
@@ -68,6 +65,7 @@
     "vite-plugin-solid": "~2.9.1"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit --checkJs false --skipLibCheck"
+    "typecheck": "tsc --noEmit",
+    "build": "node build && pnpm tsc"
   }
 }

package/client/mount.ts

@@ -1,99 +0,0 @@
-import type { JSX } from "solid-js";
-import { createStore } from "solid-js/store";
-import { createComponent, getHydrationKey, getOwner, hydrate, type MountableElement } from "solid-js/web";
-
-export function mount(fn: () => JSX.Element, el: MountableElement) {
-  if (import.meta.env.START_ISLANDS) {
-    const map = new WeakMap();
-    async function mountIsland(el: HTMLElement) {
-      if (el.dataset.css) {
-        let css = JSON.parse(el.dataset.css);
-        for (let href of css) {
-          if (!document.querySelector(`link[href="${href}"]`)) {
-            let link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = href;
-            document.head.appendChild(link);
-          }
-        }
-      }
-
-      let mod = await import(
-        /* @vite-ignore */
-        import.meta.env.MANIFEST["client"]!.chunks[el.dataset.id!.split("#")[0] as string]!.output.path
-      );
-      if (!mod || !el.dataset.hk) return;
-
-      let Component = mod[el.dataset.id!.split("#")[1] as string];
-      let hk = el.dataset.hk;
-      // _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
-
-      let props = createStore({
-        ...JSON.parse(el.dataset.props!),
-        get children() {
-          const p = el.getElementsByTagName("solid-children");
-          getHydrationKey();
-          [...p].forEach(a => {
-            (a as any).__$owner = getOwner();
-          });
-          return;
-        }
-      });
-
-      map.set(el, props);
-
-      hydrate(() => createComponent(Component, props[0]), el, {
-        renderId: hk.slice(0, hk.length - 1) + `${1 + Number(el.dataset.offset)}-`,
-        owner: lookupOwner(el)
-      });
-
-      delete el.dataset.hk;
-      el.dataset.hkk = hk;
-    }
-
-    let queue: HTMLElement[] = [];
-    let queued = false;
-    function runTaskQueue(info: any) {
-      while (info.timeRemaining() > 0 && queue.length) {
-        mountIsland(queue.shift()!);
-      }
-      if (queue.length) {
-        requestIdleCallback(runTaskQueue);
-      } else queued = false;
-    }
-
-    const hydrateIslands = () => {
-      const islands: NodeListOf<HTMLElement> = document.querySelectorAll("solid-island[data-hk]");
-      const assets = new Set<string>();
-      islands.forEach((el: HTMLElement) => el.dataset.id && assets.add(el.dataset.id));
-      Promise.all(
-        [...assets].map(
-          asset =>
-            import(/* @vite-ignore */import.meta.env.MANIFEST["client"]!.chunks[asset.split("#")[0] as string]!.output.path)
-        )
-      )
-        .then(() => {
-          islands.forEach((el: HTMLElement) => {
-            if (el.dataset.when === "idle" && "requestIdleCallback" in window) {
-              if (!queued) {
-                queued = true;
-                requestIdleCallback(runTaskQueue);
-              }
-              queue.push(el);
-            } else mountIsland(el as HTMLElement);
-          });
-        })
-        .catch(e => console.error(e));
-    };
-
-    function lookupOwner(el: HTMLElement) {
-      const parent = el.closest("solid-children");
-      return parent && (parent as any).__$owner;
-    }
-
-    hydrateIslands();
-
-    return;
-  }
-  return hydrate(fn, el);
-}

package/client/spa/index.tsx

@@ -1,10 +0,0 @@
-// @refresh skip
-import type { JSX } from "solid-js";
-import { render, type MountableElement } from "solid-js/web";
-import "vinxi/client";
-
-export function mount(fn: () => JSX.Element, el: MountableElement) {
-  render(fn, el);
-}
-
-export { StartClient } from "../StartClient";

package/config/server-fns-runtime.ts

@@ -1,28 +0,0 @@
-import { getRequestEvent } from "solid-js/web";
-import { provideRequestEvent } from "solid-js/web/storage";
-import { cloneEvent } from "../server/fetchEvent";
-
-export function createServerReference(fn: Function, id: string, name: string) {
-  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();
-      if (!ogEvt) throw new Error("Cannot call server function outside of a request");
-      const evt = cloneEvent(ogEvt);
-      evt.locals.serverFunctionMeta = {
-        id: id + "#" + name,
-      };
-      evt.serverOnly = true;
-      return provideRequestEvent(evt, () => {
-        return fn.apply(thisArg, args);
-      });
-    }
-  });
-}

package/config/server-handler.ts

@@ -1,261 +0,0 @@
-/// <reference types="vinxi/types/server" />
-import { crossSerializeStream, fromJSON, getCrossReferenceHeader } from "seroval";
-// @ts-ignore
-import {
-  CustomEventPlugin,
-  DOMExceptionPlugin,
-  EventPlugin,
-  FormDataPlugin,
-  HeadersPlugin,
-  ReadableStreamPlugin,
-  RequestPlugin,
-  ResponsePlugin,
-  URLPlugin,
-  URLSearchParamsPlugin
-} from "seroval-plugins/web";
-import { sharedConfig } from "solid-js";
-import { renderToString } from "solid-js/web";
-import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, setHeader, setResponseStatus, type HTTPEvent } from "vinxi/http";
-import invariant from "vinxi/lib/invariant";
-import { cloneEvent, getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
-import { createPageEvent } from "../server/pageEvent";
-// @ts-ignore
-import { FetchEvent, PageEvent } from "../server";
-
-function createChunk(data: string) {
-  const bytes = data.length;
-  const baseHex = bytes.toString(16);
-  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex; // 32-bit
-  return new TextEncoder().encode(`;0x${totalHex};${data}`);
-}
-
-function serializeToStream(id: string, value: any) {
-  return new ReadableStream({
-    start(controller) {
-      crossSerializeStream(value, {
-        scopeId: id,
-        plugins: [
-          CustomEventPlugin,
-          DOMExceptionPlugin,
-          EventPlugin,
-          FormDataPlugin,
-          HeadersPlugin,
-          ReadableStreamPlugin,
-          RequestPlugin,
-          ResponsePlugin,
-          URLSearchParamsPlugin,
-          URLPlugin
-        ],
-        onSerialize(data, initial) {
-          controller.enqueue(
-            createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data)
-          );
-        },
-        onDone() {
-          controller.close();
-        },
-        onError(error) {
-          controller.error(error);
-        }
-      });
-    }
-  });
-}
-
-async function handleServerFunction(h3Event: HTTPEvent) {
-  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 singleFlight = request.headers.has("X-Single-Flight");
-  const url = new URL(request.url);
-  let filepath: string | undefined | null, name: string | undefined | null;
-  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 serverFunction = (
-    await import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME]!.chunks[filepath!]!.import()
-  )[name!];
-  let parsed: any[] = [];
-
-  // grab bound arguments from url when no JS
-  if (!instance || h3Event.method === "GET") {
-    const args = url.searchParams.get("args");
-    if (args) JSON.parse(args).forEach((arg: any) => parsed.push(arg));
-  }
-  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 as any).body }).formData()
-      );
-      // what should work when #1721 is fixed
-      // parsed.push(await request.formData);
-    } else if (contentType?.startsWith("application/json")) {
-      // workaround for https://github.com/unjs/nitro/issues/1721
-      // (issue only in edge runtimes)
-      const tmpReq = new Request(request, { ...request, body: (h3Event.node.req as any).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 {
-    let result = await provideRequestEvent(event, async () => {
-      /* @ts-ignore */
-      sharedConfig.context = { event };
-      event.locals.serverFunctionMeta = {
-        id: filepath + "#" + name,
-      };
-      return serverFunction(...parsed);
-    });
-
-    if (singleFlight && instance) {
-      result = await handleSingleFlight(event, result);
-    }
-
-    // handle responses
-    if (result instanceof Response && instance) {
-      // forward headers
-      if (result.headers) mergeResponseHeaders(h3Event, result.headers);
-      // forward non-redirect statuses
-      if (result.status && (result.status < 300 || result.status >= 400)) setResponseStatus(h3Event, result.status);
-      if ((result as any).customBody) {
-        result = await (result as any).customBody();
-      } else if (result.body == undefined) result = null;
-    }
-
-    // handle no JS success case
-    if (!instance) {
-      const isError = result instanceof Error;
-      let redirectUrl = new URL(request.headers.get("referer")!).toString();
-      if (result instanceof Response && result.headers.has("Location")) {
-        redirectUrl = new URL(
-          result.headers.get("Location")!,
-          new URL(request.url).origin + import.meta.env.SERVER_BASE_URL
-        ).toString();
-      }
-      return new Response(null, {
-        status: 302,
-        headers: {
-          Location: redirectUrl,
-          ...(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;`
-              }
-            : {})
-        }
-      });
-    }
-    setHeader(h3Event, "content-type", "text/javascript");
-    return serializeToStream(instance, result);
-  } catch (x) {
-    if (x instanceof Response) {
-      if (singleFlight && instance) {
-        x = await handleSingleFlight(event, x);
-      }
-      // forward headers
-      if ((x as any).headers) mergeResponseHeaders(h3Event, (x as any).headers);
-      // forward non-redirect statuses
-      if ((x as any).status && (!instance || (x as any).status < 300 || (x as any).status >= 400)) setResponseStatus(h3Event, (x as any).status);
-      if ((x as any).customBody) {
-        x = (x as any).customBody();
-      } else if ((x as any).body == undefined) x = null;
-    } else {
-      const error = x instanceof Error ? x.message : typeof x === "string" ? x : "true";
-      setHeader(h3Event, "X-Error", error);
-    }
-    if (instance) {
-      setHeader(h3Event, "content-type", "text/javascript");
-      return serializeToStream(instance, x);
-    }
-    return x;
-  }
-}
-
-let App: any;
-async function handleSingleFlight(sourceEvent: FetchEvent, result: any): Promise<Response> {
-  let revalidate: string[];
-  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 */
-    App || (App = (await import("#start/app")).default);
-    /* @ts-ignore */
-    event.router.dataOnly = revalidate || true;
-    /* @ts-ignore */
-    event.router.previousUrl = sourceEvent.request.headers.get("referer");
-    try {
-      renderToString(() => {
-        /* @ts-ignore */
-        sharedConfig.context.event = event;
-        App();
-      });
-    } catch (e) {
-      console.log(e);
-    }
-
-    /* @ts-ignore */
-    const body = event.router.data;
-    if (!body) return result;
-    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 });
-    } else if ((result as any).customBody) {
-      body["_$value"] = (result as any).customBody();
-    }
-    result.customBody = () => body;
-    result.headers.set("X-Single-Flight", "true");
-    return result;
-  });
-}
-
-export default eventHandler(handleServerFunction);